Использование / изменение массива объектов для использования в раскрывающемся списке ngRepeat

Я пытаюсь использовать массив объектов для отображения в раскрывающемся списке. Вот файл json

{
"list": [
{
"product": "Test1 ",
"Name": "Test 1 Name",
"countries": [{"countryId": 53,"countryName": "Unites States"}]
},
{
"product": "Test 2",
"Name": "Test 2 Name",
 "countries": [{"countryId": 54,"countryName": "Canada"}]
}    
]

}

Я хотел бы показать выпадающий список стран, использующих countryName, чтобы показать в выпадающем списке и использовать countryId в качестве значения.

2 ответа

  1. Вы должны сначала попробовать какой-то код, и если вам не удастся достичь того, что вы пытались, то задайте вопрос.

    Вот ответ, предполагающий, что вы пробовали какой-то код.

    Использовать select as

    выберите как:

    Использование select asсвяжет результат выражения select с моделью, но значение элементов and html будет либо index (for array data sources)значением, либо property name (for object data sources)значением в коллекции. Если используется выражение track by, результат этого выражения будет установлен в качестве значения параметра и элементов select.

    Это ссылка

    <!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    
    <body ng-app="myApp" ng-controller="myCtrl">
    
    <select ng-options="item.countries[0].countryId as item.countries[0].countryName for item in records.list" ng-model="selected">
      <option value="">Select</option>
      </select>
    
    
    <script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope) {
      $scope.records = {
    "list": [
    {
    "product": "Test1 ",
    "Name": "Test 1 Name",
    "countries": [{"countryId": 53,"countryName": "Unites States"}]
    },
    {
    "product": "Test 2",
    "Name": "Test 2 Name",
     "countries": [{"countryId": 54,"countryName": "Canada"}]
    }    
    ]
    
    }
    
    });
    </script>
    
    </body>
    </html>

  2. Ознакомьтесь с документацией select . Angular имеет несколько способов selectввода.

    В любом случае, вам нужно будет сохранить объект «list» в $scope в файле JS. Например. $scope.list = [...]

    Затем один из способов сделать выбор-использовать ng-options:

    <select ng-options="item.name for item in list track by item.product" ng-model="userChoice"></select>
    

    Другой вариант — использовать ng-repeat на обычном теге опции:

    <select ng-model="userChoice">
    <option ng-repeat="item in list" value="item.product">{{item.name}}</option>
    </select>
    

    Они примерно эквивалентны, но не совсем. Вы обнаружите, что при использовании ng-repeatтрудно выбрать опцию «по умолчанию». При использовании ng-optionsтрудно добавить настраиваемые поля, которых нет в модели, например «другие » или»нет».