如何按屬性值過濾ng-repeat？

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

很簡單，在過濾器表達式中使用一個函數。

 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"} ）