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 Attempt

Answer 1

正如@Maxim Shoustin建议的那样，实现目标的最佳方法是使用自定义过滤器但是还有其他方法，其中一种方法是在同一元素上使用ng-if指令你放了ng-repeat指令（也就是这里的plunker）：< / p>

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

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

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

<强>更新
如上所述，对于此类问题，这是解决方案之一，可能适合您的需求，也可能不适合您。正如评论中指出的那样，ng-if是一个指令，实际上意味着它可能会在后台执行比您预期更多的事情。
例如，ng-if creates a new scope from it's parent：

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

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

Answer 2

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

对象：模式对象可用于过滤特定属性数组包含的对象。例如{name：＆＃34; M＆＃34;，phone：＆＃34; 1＆＃34;} 谓词将返回具有属性名称的项目数组含有＆＃34; M＆＃34;和包含＆＃34; 1＆＃34;的财产电话。 ...... 谓词可以通过在字符串前加上来否定！。例如{name：＆＃34;！M＆＃34;}谓词将返回一个具有属性名称的项目数组不包含＆＃34; M＆＃34;。

因此对于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

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

3 个答案: