时间戳

首页 > 解决方案 > 如何为对象数组提供 ng-options？

javascript - 如何为对象数组提供 ng-options？

问题描述

我的 json 在角度选择标签中绑定时遇到问题。

杰森：

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

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

        "id": [
           2
        ]
    }
    ]
}

这里我需要在选择标签中绑定服务属性。我正在获取对象数组。

任何帮助，将不胜感激。

谢谢

标签： javascriptangularjs

解决方案

您将获得一个数组，因为主列表中的每个项目都有一个service属性和id属性作为数组，因此为了填充选项列表，您需要使用以下内容：

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

我使用在控制器中保存了项目列表，并在指令中$scope.items使用它来引用它。... in items.ListngOptions

每个选项的值<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>

推荐阅读