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

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

在控制器：

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

现在在我的模板，我想告诉大家的是不匹配name_key='FirstPerson'。我想它必须是过滤器，所以我设置了一个普朗克来玩它，但没有任何运气。 Plunkr Attempt

来源

2013-11-05 aron.duby

我尝试了解：你想显示所有项目，但指出谁匹配谁不是谁？或只是过滤？ –

134

由于@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-ifcreates a new scope from it's parent：

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

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

来源

2013-11-05 07:48:00

这正是我所期待的，知道必须有一些简短而美好的方式不用自定义过滤器就可以做到。谢谢！ –

注意：有一些作用域的行为 - 如果这可能会很棘手。我尝试了这种方法，并在别处引发了问题。也就是说，我有一个“观察者”指令，当中继器完成时广播事件。在将ng-if添加到该中继器之后，它不再发起该事件。自定义过滤器实际上可能是最干净的方式。 – claywhipkey

@claywhipkey你是对的，最清洁的方式是使用过滤器，但是这不适合所有情况。无论如何，thx的评论，你可以看到，我已经在答案中增加了*提升*更新只是为了让任何人知道使用指令过滤数据的影响。 –

当您执行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-05 07:40:09

感谢您为此付出的努力。它绝对正确，但我最终以代码中的@ gion_13答案的易用性进行了讨论，所以我认为我更好地将他标记为公认的答案 –

我知道这是一个古老的，但万一有人会寻找另一种可能的解决方案，这里是另一种方式来解决这个问题 - 使用标准filter功能：

对象：的模式对象可以用于过滤数组中包含的对象的特定属性。例如{名称：“M”，电话：“1”} 谓词将返回包含属性名称为的项目数组，其中包含“M”和属性手机包含“1”。 ... 谓词可以通过在字符串前添加！来取代。例如{名称： “！M”}谓词将返回一个不包含“M”的属性名称为的项目数组。

所以对于TS例如这样的事情应该做的：

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

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

来源

2015-07-09 12:15:50

简单点。没有自定义过滤器或作者创建的新范围。适用于跳过列表中的单个值。 – mbokil

我想你需要从'player.name_key'中省略'player' - 所以在上面的例子中它只是“{name_key：'！FirstPerson'}”。 – smithml

我从来没有能够让Angular玩空键。是否存在某种使用内置过滤器的技巧，相当于玩家中的'玩家| |过滤器：{name_key：''}'？该特定指令不会仅匹配没有/空'name_key'的玩家。反过来，'name_key：'！''用于选择任何具有非空'name_key'的玩家也不会起作用。 –

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

回答

相关问题