ng-repeatの項目が式にマッチしたらスキップするようにangularに指示する方法を探しています;
コントローラーで:
$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の試み。
Maxim Shoustin](https://stackoverflow.com/users/1631379/maxim-shoustin)が提案したように、あなたが望むことを実現する最善の方法は、カスタムフィルタを使用することでしょう。
そのひとつが、ng-if
ディレクティブをng-repeat
ディレクティブと同じ要素で使う方法です(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
それ'の親から新しいスコープを作るなどです:
ngIf 内で作成されたスコープは、プロトタイプ継承により親スコープから継承されます。
これは通常、通常の動作には影響しませんが、予期せぬケースを防ぐために、実装前にこのことを念頭に置いておく必要があります。
これは古い話ですが、誰かが他の可能な解決策を探している場合に備えて、これを解決する別の方法を紹介します:
オブジェクト: パターンオブジェクトを使用して、特定のプロパティをフィルタリングすることができます。 配列に含まれるオブジェクト。例えば、{name:"M", phone:"1"} のように。 述語は、プロパティnameを持つアイテムの配列を返します。 quot;M"を含む電話機と、quot;1"を含む電話機です。述語は という文字列を先頭につけて、否定することができます 例えば、{name: "!M"} 述語は、プロパティ名を持つアイテムの配列を返します。 "M"を含んでいない。
ですから、TSの例では、次のようにします:
<ul>
<li ng-repeat="player in players | filter: { name_key: '!FirstPerson' }"></li>
</ul>
カスタムフィルタを書く必要もなく、新しいスコープを持つ ng-if
を使う必要もない。
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;
};
});
Demo Plunker