如何在ng-options中按属性过滤项目?

时间:2016-03-18 17:10:20

标签: angularjs

我有一些数据和一个选择控件,您可以在下面的代码示例中看到。它适用于我,但我希望能够按类型过滤数据。在我的代码示例中,我展示了一种尝试根据类型为1的类型过滤数据的方法。我不确定我创建select的方式是否会导致这个简单的内联过滤器不起作用或者我做错了什么?

$scope.data = [{ 
name : "5 play",
type : 1
}, {
name : "one on one",
type : 2}, {
name : "two on one",
type : 2}];

<select class="form-control" ng-model="selectedRule" 
ng-options="item as (item.Name) for item in data track by item.Name | filter:{type:1}"></select>

2 个答案:

答案 0 :(得分:1)

是的,如上所述。最后移动track by,并将字母N设为小写,如下面的演示或fiddle中所示。

&#13;
&#13;
angular.module('demoApp', [])
  .controller('mainController', MainController);

function MainController($scope) {
  $scope.data = [{
    name: "5 play",
    type: 1
  }, {
    name: "one on one",
    type: 2
  }, {
    name: "two on one",
    type: 2
  }];
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="mainController">

  <select class="form-control" ng-model="selectedRule" ng-options="item as item.name for item in data | filter:{type:1} track by item.name"></select>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

如角度文档中所述,track by必须始终是最后一个表达式:

  

注意:track by必须始终是最后一个表达式

我的猜测是所有后面的内容都没有考虑,所以这就是为什么你的滤镜没有应用的原因。将曲目移动到正确的位置应该修复它