Question

我有一个json结构，我需要帮助来设置一个带有他的结构和组的选择字段。

在我的范围内：

this.cols = jsonData;

这是json：

[
  {
    "name": [
      {"displayName": "First Name", "modelName": "firstName"},
      {"displayName": "Last Name", "modelName": "lastName"}
    ]
  },
  {
    "address": [
      {"displayName": "Zip Code", "modelName": "zipCode"},
      {"displayName": "city", "modelName": "city"}
    ]
  }
]

我需要的选择将如下所示：

-name (the group name)
First Name(displayName) and track by modelName
Last Name(displayName) and track by modelName
-address (the group name)
Zip Code(displayName) and track by modelName
city(displayName) and track by modelName

我知道如何做一个简单的ng选项，但不是这样，请帮助。

Answer 1

将数组更改为此结构：

$scope.rows = [
    {"group": "name", "displayName": "First Name", "modelName": "firstName"},
    {"group": "name", "displayName": "Last Name", "modelName": "lastName"},
    {"group": "address", "displayName": "Zip Code", "modelName": "zipCode"},
    {"group": "address", "displayName": "city", "modelName": "city"}
]

然后您可以使用ng-options：

<select ng-model="row" ng-options="row.modelName as row.displayName group by row.group for row in rows"></select>

Plunker

Answer 2

我不认为你可以使用ng-options指令来做，但你可以这样做：

<select>
 <optgroup ng-repeat="(k,v) in cols" label="k">
    <option ng-repeat="option in v">{{option.displayName}}</option>
  </optgroup>
</select>

(k,v)中的

ng-repeat代表键值对。

Angular ng选项分组依据

2 个答案: