angular ng-repeat如果匹配表达式,则跳过一个项目

Question

我正在寻找一种基本上告诉角度来跳过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尝试

Answer 1

正如@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 从其父级创建一个新范围:

在ngIf中创建的作用域使用原型继承从其父作用域继承.

这通常不会影响正常行为,但为了防止意外情况,您应该在实施之前牢记这一点.

Answer 2

我知道这是一个旧的,但如果有人想寻找另一种可能的解决方案,这里有另一种解决方法 - 使用标准过滤器功能:

对象:模式对象可用于过滤数组包含的对象的特定属性.例如{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新的范围.

Answer 3

您可以在实施时使用自定义过滤器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