如果ng-repeat与expression式匹配,则跳过一个项目
我正在寻找一种方法来基本告诉angular度跳过一个ng-repeat中的项目,如果它匹配一个expression式,基本上continue
;
在控制器中:
$scope.players = [{ name_key:'FirstPerson', first_name:'First', last_name:'Person' }, { name_key:'SecondPerson', first_name:'Second', last_name:'Person' }]
现在在我的模板中,我想显示每个不符合name_key='FirstPerson'
。 我觉得它必须是filter,所以我设置了一个普朗克玩它,但没有任何运气。 普朗克尝试
正如@Maxim Shoustin所build议的,实现你想要的最好的方法就是使用自定义filter。
但是还有其他的方法,其中一个就是在ng-repeat
指令中使用ng-if
指令(同样,这里是plunker ):
<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
从它的父代创build一个新的作用域 :
ngIf中创build的范围使用原型inheritance从其父范围inheritance。
这通常不会影响正常的行为,但为了防止意外的情况,在实施之前应该牢记这一点。
我知道这是一个旧的,但如果有人会寻找另一种可能的解决scheme,这是另一种解决方法 – 使用标准的filterfunction:
对象:可以使用模式对象来过滤数组中包含的对象的特定属性。 例如{名称:“M”,电话:“1”}谓词将返回一个包含属性名称包含“M”和属性手机包含“1”的项目数组。 … 谓词可以通过在string前添加!来取消。 例如{name:“!M”}谓词将返回一个包含属性名称不包含“M”的项目数组。
所以对于TS例子,应该这样做:
<ul> <li ng-repeat="player in players | filter: { name_key: '!FirstPerson' }"></li> </ul>
不需要编写自定义filter,不需要使用ng-if
它是新的范围。
您可以在执行ng-repeat
时使用自定义filter。 就像是:
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