94

我正在寻找一种方法来基本上告诉 angular 跳过 ng-repeat 中的项目，如果它与表达式匹配，基本上continue；

在控制器中：

$scope.players = [{
    name_key:'FirstPerson', first_name:'First', last_name:'Person'
}, {
    name_key:'SecondPerson', first_name:'Second', last_name:'Person'
}]

现在在我的模板中，我想向所有人展示不匹配name_key='FirstPerson'的 . 我认为它必须是过滤器，所以我设置了一个 Plunkr 来玩它，但没有任何运气。Plunkr 尝试

4

3 回答 3

145

正如@Maxim Shoustin建议的那样，实现您想要的最佳方法是使用自定义过滤器。
但是还有其他方法，其中一种方法是ng-if在您放置指令时在同一元素上使用ng-repeat指令（另外，这里是plunker）： 

<ul>
    <li ng-repeat="player in players" ng-if="player.name_key!='FirstPerson'"></li>
</ul>

从 estetical 角度来看，这可能存在一个小缺点，但有一个主要优点，即您的过滤可以基于与players数组不紧密耦合的规则，并且可以轻松访问应用程序范围内的其他数据： 

  <li 
      ng-repeat="player in players" 
      ng-if="app.loggedIn && player.name != user.name"
  ></li>

更新
如前所述，这是此类问题的解决方案之一，可能适合也可能不适合您的需求。
正如评论中所指出的，ng-if是一个指令，这实际上意味着它在后台执行的操作可能比您预期的要多。
例如，ng-if 从它的 parent 创建一个新范围：

在 ngIf 中创建的范围使用原型继承从其父范围继承。

这通常不会影响正常行为，但为了防止出现意外情况，您应该在实施之前记住这一点。

于 2013-11-05T07:48:00.667 回答
44

我知道这是一个旧的，但如果有人会寻找另一种可能的解决方案，这是解决这个问题的另一种方法 - 使用标准过滤器功能：

对象：模式对象可用于过滤数组包含的对象的特定属性。例如 {name:"M", phone:"1"} 谓词将返回一个项目数组，这些项目的属性名称包含“M”，属性电话包含“1”。...谓词可以通过在字符串前面加上 ! 来否定。例如 {name: "!M"} 谓词将返回属性名称不包含“M”的项目数组。

因此，对于 TS 示例，应该这样做：

<ul>
    <li ng-repeat="player in players | filter: { name_key: '!FirstPerson' }"></li>
</ul>

无需编写自定义过滤器，无需使用ng-if它的新范围。

于 2015-07-09T12:15:50.857 回答
19

实现时可以使用自定义过滤器ng-repeat。就像是：

 data-ng-repeat="player in players |  myfilter:search.name

myfilter.js：

app.filter('myfilter', function() {


   return function( items, name) {
    var filtered = [];

    angular.forEach(items, function(item) {

      if(name == undefined || name == ''){
        filtered.push(item);
        }

      /* only if you want start With*/
      // else if(item.name_key.substring(0, name.length) !== name){
      //   filtered.push(item);
      // }

      /* if you want contains*/
      // else if(item.name_key.indexOf(name) < 0 ){
      //   filtered.push(item);
      // }

       /* if you want match full name*/
       else if(item.name_key !== name ){
        filtered.push(item);
      }
    });

    return filtered;
  };
});

演示Plunker

于 2013-11-05T07:40:09.010 回答