如何在 angularJS 中填充选择框？

Question

我的 json 数据如何使用 angular JS

设置下拉列表控件的 selected 选项

$scope.alltoys=[
       {
         "dId": "570b886545034f0001718247",
         "dName": "Toys",
         "dSubName": "Comics",
         "users": [
           {
                "name": "Superman",
                "id": "570b9e3a45034f000171827b"
           },
           {
                "name": "Batman",
                "id": "570ba00045034f000171828a"
           }]
       },
       {
        "dId": "5767c68c52faff0001fb8555",
        "dName": "Toys",
        "dSubName": "General",
        "users": [
           {
                "name": "Jack",
                "id": "570b9e3a45034f000171827b"
           },
           {
                "name": "Sparrow",
                "id": "570ba00045034f000171828a"
           }]
        }
]

如何使用 angular js

填充此 select 框

我想这样填充

Toys-Comics
    Batman
    Superman
Toys-General
    Jack
    Sparrow

这里 Toys-Comics 和 Toys-General 只是 selected 内容的标题我想在填充时对用户数组进行排序。

<div class="controls">
    <select class="form-control" ng-model="toy"
        ng-options="eachtoy as eachtoy.dName+' - '+eachtoy.dSubName group by eachtoy for eachtoy in alltoys">
        <option value="">---------------Select---------------</option>
    </select>
</div>

我试过了，但没用。

Answer 1

几个变化。首先，确保 $scope.alltoys 是一个集合（数组），像这样：

$scope.alltoys = [{
  "dId": "570b886545034f0001718247",
  "dName": "Toys",
  "dSubName": "Comics",
  "users": [{
    "name": "Superman",
    "id": "570b9e3a45034f000171827b"
  }, {
    "name": "Batman",
    "id": "570ba00045034f000171828a"
  }]
}, {
  "dId": "5767c68c52faff0001fb8555",
  "dName": "Toys",
  "dSubName": "General",
  "users": [{
    "name": "Jack",
    "id": "570b9e3a45034f000171827b"
  }, {
    "name": "Sparrow",
    "id": "570ba00045034f000171828a"
  }]
}];

然后更改您的 html 以使用 optgroup 处理组，如下所示：

<select class="form-control" ng-model="toy">
  <option value="">---------------Select---------------</option>
  <optgroup ng-repeat="eachtoy in alltoys | orderBy: 'dName + dSubName" label="{{eachtoy.dName+' - '+eachtoy.dSubName}}">
    <option ng-repeat="user in eachtoy.users | orderBy: 'name'">{{user.name}}</option>
  </optgroup>
</select>

这是一个有效的 plunk

如何在 angularJS 中填充选择框？

How to populate selectbox in angularJS?

javascript

angularjs

ng-options