使用ng-options指令过滤一个json对象的内容。

15 浏览
0 Comments

使用ng-options指令过滤一个json对象的内容。

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

current result:

desired result:

0

2 答案

0 Comments

问题出现的原因是使用了ng-options指令进行过滤json对象时遇到了困难。解决方法是可以直接在html中使用ng-repeat指令来重复选项，并不使用data-ng-options指令。通过使用ng-repeat指令，可以直接设置作用域值，达到过滤json对象的目的。具体代码如下：

希望这对你有帮助！谢谢！这个回答正好解答了我的问题。我认为AngularJS Value Attribute for select澄清了一切，我只是对在浏览器中看到的结果感到困惑。

0
0 Comments

问题的出现原因是在ng-options指令中没有指定item.id。解决方法是在ng-options指令中加上item.id参数。具体代码如下：

根据AngularJS官方文档（http://docs.angularjs.org/api/ng/directive/select）的说明，ngOptions指令提供了一个迭代器，用于绑定非字符串值的select元素的模型。这是因为目前option元素只能绑定字符串值。

作者在jsFiddle中更新了示例（http://jsfiddle.net/5MQ9L/1/）。如果观察这个示例，为什么下拉菜单一开始会有一个空的列表项，以及如何去掉它？（在选择了某个选项后它会消失）

这是因为$scope.selected被设置为空字符串，但是items数组中没有id值为''（空字符串）的项。为了解决这个问题，可以将$scope.selected初始化为一个有效的项，例如'023'。具体示例请参考jsfiddle.net/to4n3xf1。

0