javascript - 如何按属性值过滤 ng-repeat？

Question

使用 ng-repeat 迭代列表时，如何通过这些项目的属性添加条件/过滤器。

示例(当然现实世界中有几个项目):

{"items":[{"type":"xxx"}]}

我只想显示 type!='test' 的项目。

以下内容不打印任何内容:

<ul ng-repeat="item in items | filter: (item.type != 'test')">

如果我删除过滤器，当然会打印所有项目。

另外，如果可能的话，我如何创建一个条件来检查不允许的多个 type 值？

Answer 1

简单，使用 filter 中的函数表达。

angular.module('app', [])
  .controller('AppCtrl', function($scope) {
    $scope.items = [{
      "type": "xxx"
    }, {
      "type": "test"
    }];

    $scope.filterFn = function(value) {
       return value.type !== 'test';
    };
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="AppCtrl">
  <ul>
    <li ng-repeat="item in items | filter: filterFn">{{item.type}}</li>
  </ul>
</div>

如果您的数据架构发生更改，只需更新过滤器函数即可。

您还可以使用对象表示法

angular.module('app', [])
  .controller('AppCtrl', function($scope) {
    $scope.items = [{
      "type": "xxx"
    }, {
      "type": "test"
    }];
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="AppCtrl">
  <ul>
    <li ng-repeat="item in items | filter: {type: '!test'}">{{item.type}}</li>
  </ul>
</div>

但这有一些限制，例如不支持原始值过滤器(它需要一个具有属性的对象作为项目)并且不能多次指定相同的过滤器(类似于 {type:"!test!xxx"} )