Angularjs：如何应用 NOT 过滤器？

Question

如何在以下示例中应用 NOT 过滤器？

尝试了$filter('filter')(users,{ranks: {id: '!' + '15'},true) 和$filter('filter')(users, !{ranks: {id:15}},true)，但似乎没有任何效果。

这里的目的是在过滤后的数组中不获取 id = 15 的用户

控制器：

app.controller('MainCtrl', function($scope,$filter) {

  $scope.users = [
    {
      id: 1,
      name: 'John Doe',
      ranks: [ 
        { id: 1, name: 'Admin'},
        { id: 2, name: 'Doe' }
        ],
    },
    {
      id: 2,
      name: 'Barbara Doe',
      ranks: [ { id: 15, name: 'Wife'}, { id: 2, name: 'Doe' }],
    },
    {
      id: 3,
      name: 'Jane Doe',
      ranks: [ { id: 16, name: 'Wife'}, { id: 17, name: 'Doe' }],
    },
  ];

  $scope.filter = $filter('filter')($scope.users, {ranks: {id: !15}},true);


});

HTML：

<p>HTML Filter: List of users without having a rank with id: 15</p>
    <ul>
      <li ng-repeat="user in users | filter:{ranks: {id: '!' + '15'}} : true"> 
        {{ user }}
      </li>
    </ul>

    <p>Controller Filter: List of users without having a rank with id: 15</p>
    <ul>
      <li ng-repeat="user in filter "> 
        {{ user }}
      </li>
    </ul>

Plunker： http://plnkr.co/edit/73lLDpn3uLHozObKn539?p=preview

Answer 1

您正试图过滤掉排名属性包含 {id: 15} 的用户，您可能别无选择，只能编写自定义过滤器或谓词函数来执行此操作（因为这不是传统的 ==或 != 比较）

下面是一个使用谓词函数的例子：

     ranksContainsId15 = function(user, index, users){
        // Look for rank.id === 15
        for(var i=0; i < user.ranks.length; i++){
          if(user.ranks[i].id === 15){
            return false; // so this user will NOT be included
          }
        }

        // no rank.id === 15 found, so this user will be included
        return true;
      }

      $scope.filtered = $filter('filter')($scope.users, ranksContainsId15);

我更新了示例以显示所有用户，然后显示排名数组中没有 rank.id == 15 的用户

http://plnkr.co/edit/6x3OEzSiDfIziAnVQ0Em?p=preview

要创建具有可编程 ID 的谓词函数，请使用函数来创建它们

createPredicateFn = function(id){
    return function(user, index, users){
            for(var i=0; i < user.ranks.length; i++){
              if(user.ranks[i].id === id){
                return false;
              }
            }

            return true;
    }
}

$scope.filtered = $filter('filter')($scope.users, createPredicateFn(15));

Answer 2

您可以创建自定义过滤器来手动过滤项目：

.filter('customFilter', function() {
  return function(array, numberToSkip) {
    var result = [];

    for (i = 0; i < array.length; i++) {
      var arrayItemContainsId = false;

      for (j = 0; j < array[i].ranks.length; j++) {
        if (array[i].ranks[j].id === numberToSkip) {
          arrayItemContainsId = true;
        }
      }

      if (arrayItemContainsId == false) {
        result.push(array[i]);
      }
    }

    return result;
  };
});

并像这样使用它：

<ul>
   <li ng-repeat="user in users | customFilter: 15"> 
      {{ user }}
   </li>
</ul>

Answer 3

您实现的 not 过滤器略有错误。改用这个

<li ng-repeat="user in users | filter: !{ranks: {id:15}} : true">