5

来自 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] 。

4

2 回答 2

5

您可以将 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

于 2014-12-24T11:08:21.010 回答
3

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

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

<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，您可以将其更改为键“ 0”或“ 1”，如果您替换value={{value}}为value="{{key}}"

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>

于 2014-12-24T10:20:29.330 回答