使用ng-options angular js过滤json对象

Question

我在使用AngularJS将json对象过滤到选择表单元素中遇到麻烦。 这是到目前为止我得到的。 我很沮丧，任何帮助将不胜感激。

app.js：

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
  $scope.showItems = null;
  $scope.items = [
    { id: '023', name: 'foo' },
    { id: '033', name: 'bar' },
    { id: '010', name: 'blah' }];
});

singlepageapp.html：

<html data-ng-app="app">
  <body data-ng-controller="MainCtrl">
    <form>
    <select data-ng-model="showItems" data-ng-options="item as item.name for item in items"></select>
    </form>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

当前结果：

<select data-ng-model="selectedItem" ng-options="item as item.name for item in items" class="ng-pristine ng-valid">
    <option value="?" selected="selected"></option>
    <option value="0">foo</option>
    <option value="1">bar</option>
    <option value="2">blah</option>
</select>

预期结果：

<select data-ng-model="selectedItem" ng-options="item as item.name for item in items" class="ng-pristine ng-valid">
    <option value="?" selected="selected"></option>
    <option value="023">foo</option>
    <option value="033">bar</option>
    <option value="010">blah</option>
</select>

Answer 1

您总是可以只重复html中的选项，而不使用data-ng-options。 我做了一个小提琴，它可以满足您的需求： http : //jsfiddle.net/5MQ9L/

<select ng-model="selected">
    <option value="{{item.id}}" ng-repeat="(i,item) in items"> {{item.name}}
    </option>
</select>

这样，您可以直接使用范围值设置值。

希望这对您有所帮助！

Answer 2

您应该已经指定了item.id

<select ng-model="selected" ng-options='item.id as item.name for item in items'>               </select>

从http://docs.angularjs.org/api/ng/directive/select

注意：ngOptions为元素提供迭代器功能，当您希望将选择模型绑定到非字符串值时，应使用该元素而不是ngRepeat。 这是因为选项元素目前只能绑定到字符串值。

我更新了jsFiddle http://jsfiddle.net/5MQ9L/1/

使用ng-options angular js过滤json对象

问题描述

app.js：

singlepageapp.html：

当前结果：

预期结果：

2 个解决方案

解决方案1
1 已采纳 2014-01-28 07:31:28

解决方案2
0 2014-03-28 17:26:17

使用ng-options angular js过滤json对象

问题描述

app.js：

singlepageapp.html：

当前结果：

预期结果：

2 个解决方案

解决方案1 1 已采纳 2014-01-28 07:31:28

解决方案2 0 2014-03-28 17:26:17

解决方案1
1 已采纳 2014-01-28 07:31:28

解决方案2
0 2014-03-28 17:26:17