Блог

Я столкнулся с проблемой с моим json для привязки в теге select в angular.

Json:

 {
"List": [
    {
        "service": [
            "one"
        ],

        "id": [
            1
        ]
    },
    {
        "service": [
            "two"
        ],

        "id": [
           2
        ]
    }
    ]
}
  

Здесь мне нужно привязать свойство service в теге select. Я получаю массив объектов.

Буду признателен за любую помощь.

Спасибо

Вы получаете массив, потому что каждый элемент в главном списке имеет service свойство и id property в виде массива, поэтому для заполнения списка опций вам нужно использовать следующее:

 ng-options="item.id[0] as item.service[0] for item in items.List"
  

Я сохранил список элементов в контроллере с помощью $scope.items и ссылаюсь на него с помощью ... in items.List директивы ngOptions .

Значение каждого <option> и заголовок / метка в <select> элементе устанавливаются с помощью item.id[0] as item.service[0] for item — Он выбирает первый элемент в каждом из service и id массивов для каждого из параметров.

Вот рабочий пример:

 angular.module('app', []).controller('ctrl', function($scope) {
    $scope.items = {"List": [
      {
        "service": [
            "one"
        ],

        "id": [
            1
        ]
      },
      {
        "service": [
            "two"
        ],

        "id": [
           2
        ]
      }
    ]};
    
    $scope.selectionChanged = function(value) {
      console.log(value);
    };
    
    // You can also define a pre-selected option by uncommenting the following line 
    // $scope.selected = 2;
});  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <select ng-options="item.id[0] as item.service[0] for item in items.List" ng-model="selected" ng-change="selectionChanged(selected)"></select>
  
  <div ng-if="selected">
    Selected: <pre ng-bind="selected"></pre>
  </div>
</div>