【问题标题】：ng-options (key, values) in object [duplicate]对象中的ng-options（键，值）[重复]
【发布时间】：2018-11-02 03:24:09
【问题描述】：

我想知道如何使用 ng-options 渲染一个 select 元素。

    var data = {
 china:[
{name:'shanghai',code:1},
{name:'zhejiang',code:2}
],
 us:[
{name:'Alabama',code:3},
{name:'Alaska',code:4}
]
};


than,will render like this

<select>
 <optgroup label="china">
     <option value="1">shanghai</option>
     <option value="2">zhejiang</option>
</optgroup>
 <optgroup label="us">
     <option value="3">Alabama</option>
     <option value="4">Alaska</option>
</optgroup>
</select>

使用 ng-options 如何使其工作？

【问题讨论】：

标签： angularjs ng-options

【解决方案1】：

这是工作代码：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<select>
 <optgroup label="{{key}}" ng-repeat="(key,value) in data">
     <option value="{{val.code}}" ng-repeat="val in value" ng-selected="{{val.code==defaultValue}}">{{val.name}}</option>
</optgroup>
</select>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
     $scope.defaultValue = "4"; // Any default value you want here
     $scope.data = {
 china:[
{name:'shanghai',code:1},
{name:'zhejiang',code:2}
],
 us:[
{name:'Alabama',code:3},
{name:'Alaska',code:4}
]
};
});
</script>

</body>
</html>

【讨论】：

谢谢，ng-repeat 没问题，我想知道如何使用 ng-options。 bcz 使用 ng-repeat 无法绑定默认值
@wangzhen ，你可以像这样在 ng-repeat 中使用 ng-selected。通过这个你可以将默认值绑定到你的模型
@ChiruAdi 这里的 defaultValue 是什么。
$范围。默认值=“3”； // 无论你想从你的重复选项中绑定什么
是的，知道了。我会更新我的答案。

【解决方案2】：

首先你需要改变你的对象结构

const data = [
  {name: 'shanghai', code: 1, group: 'china'},
  {name: 'zhejiang', code: 2, group: 'china'},
  {name: 'Alabama', code: 1, group: 'us'},
  {name: 'Alaska', code: 2, group: 'us'}
]

并在 HTML 中使用 ng-options 绑定这个对象来选择

<select ng-model="sel" ng-options="t.code as t.name group by t.group for t in data">

【讨论】：

谢谢，但通常我们不能从服务器 API 更改对象结构。另外，这是一个解决方案:)
您也可以即时更改此设置，无需依赖服务器端对象