【问题标题】：filtering a json object with ng-options angular js使用 ng-options angular js 过滤 json 对象
【发布时间】：2014-02-19 06:33:32
【问题描述】：

我在使用 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>

【问题讨论】：

AngularJS - value attribute for select 的可能重复项
@CD.. 是的！ ng-options 的工作方式相当混乱，这有助于澄清该值不会反映在 html 中，而是在选择时返回。

标签： javascript json angularjs ng-options

【解决方案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>

这样您可以直接使用作用域 val 设置值。

希望这有帮助！

【讨论】：

谢谢！这正好回答了我的问题。我认为AngularJS Value Attribute for select 澄清了它一直正常工作，我只是对我在浏览器中看到的结果感到困惑（HTML）

【解决方案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/

【讨论】：

如果您查看您的 jsFiddle 示例，为什么您的下拉列表最初有一个空列表项 - 您如何摆脱它？（选择后消失）
发生这种情况是因为 $scope.selected 设置为 '' （空），但项目数组中的任何项目都没有具有此类值的 id。要解决此问题，请将 $scope.selected 初始化为有效项目，例如“023”。 jsfiddle.net/to4n3xf1