Javascript Angularjs：如何应用NOT过滤器？

如何在下面的示例中应用NOT筛选器

尝试了

$filter（'filter'）（用户，{ranks:{id:'！'+'15'}，true）

和

$filter（'filter'）（用户，！{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);


});

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

HTML:

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


});

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

HTML筛选器：没有id为15的排名的用户列表

• {{user}}

控制器筛选器：没有id为15的排名的用户列表

• {{user}}

---

Plunker:

您实现的过滤器没有稍有错误。请改用它

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

您可以创建自定义筛选器以手动筛选项目：

.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;
  };
});

.filter（'customFilter'，function（）{
返回函数（数组，numberToSkip）{
var结果=[]；
对于（i=0；i

这样使用：

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

{{user}}

如果试图筛选出其ranks属性包含{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);

ranksContainsId15=函数（用户、索引、用户）{
//查找rank.id==15
对于（var i=0；i

我已经更新了该示例，以显示所有用户，然后显示其列组数组中没有rank.id==15的用户

要使用可编程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));

createPredicateFn=函数（id）{
返回函数（用户、索引、用户）{
对于（var i=0；i

@Tushar尝试了这个$scope.filter=$filter（'filter'）（$scope.users，ranks.id！=15，true）；但是syntaxWell是无效的，这是一个替代方案，但是angularjs有一个不过滤的选项，那么为什么不使用它呢？检查这个：也检查@shyamalparikh，很可能是因为您正在测试一个具有给定元素的容器，而不是等于/不等于某个元素，并且您正在做的是使ng test user.ranks（这是一个列表）针对对象（{id:15}），这不是你想要的。像Dawid这样的自定义筛选器，或者像我的回答中那样的自定义谓词函数是实现这一点的方法。我如何将此谓词函数作为全局谓词？自定义筛选器？@shyamalparikh我认为最自然的解决方案是在应用程序模块中定义一个自定义筛选器。否则，可能会将其放入你的用户服务ser中副作用？例如，作为UserService.getUsersWithoutRankId（rankId）并直接使用它，而不是在作用域中对其进行过滤。因为将过滤器和/或其谓词函数放入$scope或$rootScope并不是一个好主意。我认为一个好的控制器是一个瘦控制器，它将其他事情委托给服务，例如，我希望这能有所帮助！