将枚举值绑定到 ng-options angular js答案

【问题标题】：Bind enum values to ng-options angular js将枚举值绑定到 ng-options angular js
【发布时间】：2015-02-22 11:20:25
【问题描述】：

http GET 方法的响应 JSON 如下所示

 [
    {
        "1": "Open"
    },
    {
        "2": "Expired"
    }
]

如何在 Angular js 的选择下拉框中绑定这些数据。我试过这个选项：

<select class="form-control" ng-model="selected" ng-options="item for item in data"> 
<option value="">----Select----</option> 
</select>

但我在下拉列表中得到 [object,object]。

【问题讨论】：

标签： javascript angularjs select ng-options angularjs-ng-options

【解决方案1】：

您可以将 json 数据转换为 ng-options 预期的格式，只需使用Array.reduce，如下所示

$scope.options = data.reduce(function(memo, obj) {
    return angular.extend(memo, obj);
}, {});

<select ng-model="selected" ng-options="key as val for (key, val) in options"></select>

这里有完整的例子http://plnkr.co/edit/PV4BYrz0KBkIFPWVzVaT?p=preview

【讨论】：

谢谢@mcfedr。真的很有帮助:)

【解决方案2】：

您需要 ng-repeat 语法中的 key,value，因为您有未知或不同的键

你必须先跟踪数组的两次重复，然后再跟踪对象内的键

<select class="form-control" ng-model="selected" > 
<option value="">----Select----</option> 
   <optgroup ng-repeat="v in values">

     <option ng-repeat='(key,value) in v' value="{{key}}">{{value}}</option>
   </optgroup>  
</select>

演示

选项中的值将是“open"”或“expired”，如果将value={{value}} 替换为value="{{key}}"，您可以将其更改为键“0”或“1”

app = angular.module('test',[]);
app.controller('testctrl',function($scope){
$scope.values =[{"1": "Open" },{"2": "Expired" }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="testctrl" ng-app="test">
<span ng-if="selectedModel">{{selectedModel}}</span>
<select class="form-control"  ng-model="selectedModel"> 
<option>----Select----</option> 
   <optgroup ng-repeat="v in values">
     
     <option ng-repeat='(key,value) in v' value="{{value}}">{{value}}</option>
   </optgroup>  
</select>
  </div>

【讨论】：

@A.B.我选择的值会绑定到模型吗？
让我编辑，是的。你能详细说明你的评论问题吗
如果我想在模型中使用选定的名称，即如果我选择第二个选项，则“已过期”。我可以在控制器中使用带有 te 值的模型吗？
但是为什么在 Open 和 Expired @A.B 之间存在差距？
这些是 optgroups，您可以通过 css 更改它们的样式，或者在编辑我的模型问题答案之间放置跨度