Question

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

示例（当然，现实世界中有几个项目）：

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

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

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

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

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

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

Answer 1

您可以将ng-repeat更改为以下内容：

<ul ng-repeat="item in items | filter: {type: '!test'}">

为了提供多个type值，您可以创建自己的可重用性过滤器，如下所示：

app.filter('typeFilter', function(){
  return function(arr,criteria){
    if(!angular.isDefined(criteria) || criteria == ''){
      return arr;
    }

    return arr.filter(function(curr){
      return criteria.indexOf(curr.type) == -1;
    });
  }
});

然后将您的ng-repeat语句更改为：

//List array of criteria...
<ul ng-repeat="item in items | typeFilter:['test'] ">

Answer 2

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果您的数据架构发生变化，只需更新过滤器功能。

您也可以使用对象表示法

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

2 个答案: