angularJSのオブジェクトプロパティでフィルタリングする方法


139

特定のプロパティの値でオブジェクトのリストをフィルターするカスタムフィルターをAngularJSで作成しようとしています。この場合、「極性」プロパティ(「正」、「中性」、「負」の可能な値)でフィルタリングしたいと思います。

フィルターなしの私の作業コードは次のとおりです。

HTML:

<div class="total">
    <h2 id="totalTitle"></h2>
    <div>{{tweets.length}}</div>
    <div id="totalPos">{{tweets.length|posFilter}}</div>
    <div id="totalNeut">{{tweets.length|neutFilter}}</div>
    <div id="totalNeg">{{tweets.length|negFilter}}</div>
</div>

以下は、JSON形式の "$ scope.tweets"配列です。

{{created_at: "Date", text: "tweet text", user:{name: "user name", screen_name: "user       screen name", profile_image_url: "profile pic"}, retweet_count: "retweet count", polarity: "Positive"},
 {created_at: "Date", text: "tweet text", user:{name: "user name", screen_name: "user screen name", profile_image_url: "profile pic"}, retweet_count: "retweet count", polarity: "Positive"},
 {created_at: "Date", text: "tweet text", user:{name: "user name", screen_name: "user screen name", profile_image_url: "profile pic"}, retweet_count: "retweet count", polarity: "Positive"}}

私が思いつくことができる最高のフィルターは次のとおりです:

myAppModule.filter('posFilter', function(){
return function(tweets){
    var polarity;
    var posFilterArray = [];
    angular.forEach(tweets, function(tweet){
        polarity = tweet.polarity;
        console.log(polarity);
        if(polarity==='Positive'){
              posFilterArray.push(tweet);
        }
        //console.log(polarity);
    });
    return posFilterArray;
};
});

このメソッドは空の配列を返します。また、「console.log(polarity)」ステートメントからは何も出力されません。「極性」のオブジェクトプロパティにアクセスするための正しいパラメーターを挿入していないようです。

何か案は?ご返信をお待ちしております。


3
いい質問ですが、コードを減らすことができます。その大部分は質問には関係ありません。
setec

回答:


218

単にfilterフィルターを使用する必要があります(ドキュメントを参照):

<div id="totalPos">{{(tweets | filter:{polarity:'Positive'}).length}}</div>
<div id="totalNeut">{{(tweets | filter:{polarity:'Neutral'}).length}}</div>
<div id="totalNeg">{{(tweets | filter:{polarity:'Negative'}).length}}</div>

Fiddle


1
ng-repeatステートメントの外部のng-clickイベントにカスタムフィルターを渡すことにより、アイテムリストをフィルターする方法はありますか?この場合、評価に基づいてフィルタリングする結果の上に3つの「極性」ボタンを配置します。
sh3nan1gans 2013

2
よくわかりません。フィルタリングする極性を選択する場合は、プレーンテキストの代わりにスコープ変数を渡すことができます。filter:{polarity:polarityToFilter}ここ$scope.polarityToFilterで、3つのボタンのいずれかをクリックすることで埋められます。これはあなたがやろうとしていることですか?
ブラックホール2013

それはうまくいくようです。ただし、私のアプリは個々のリストアイテムを削除できる必要もあります。
sh3nan1gans 2013

フィルター処理の問題は、フィルターが適用されるたびに新しい配列が作成され、フィルター処理された項目とフィルター処理されていない配列内の元のインデックスとの関係が壊れることです。ネクタイを維持する方法はありますか、またはng-hideは私の唯一のオプションですか?ここではNG非表示を使用してフィルタリングの代替のためのチュートリアルです: bennadel.com/blog/...
sh3nan1gans

ngRepeatは、$index使用できるローカルスコープのプロパティを公開します。
ブラックホール2013

27

ドキュメントには、完全な答えを持っています。とにかく、これはそれがどのように行われるかです:

<input type="text" ng-model="filterValue">
<li ng-repeat="i in data | filter:{age:filterValue}:true"> {{i | json }}</li>

のみフィルタしますagedata配列し、true完全一致のためです。

ディープフィルタリングの場合、

<li ng-repeat="i in data | filter:{$:filterValue}:true"> {{i}}</li>

$深いフィルタのための特別なプロパティであり、true上記のような完全一致のためです。


シンプルでクリーン。
scaryguy 2016

このフィルターは組み込まれているか、AngularとAngularJSの両方で記述する必要がありますか?
P Satish Patro

23

これをよりダイナミックにすることもできます。

<input name="filterByPolarity" data-ng-model="text.polarity"/>

次に、ng-repeatは次のようになります

<div class="tweet" data-ng-repeat="tweet in tweets | filter:text"></div>

このフィルターはもちろん、極性でフィルターするためにのみ使用されます


5

以下のコレクションがあります:


ここに画像の説明を入力してください

構文:

{{(Collection/array/list | filter:{Value : (object value)})[0].KeyName}}

例:

{{(Collectionstatus | filter:{Value:dt.Status})[0].KeyName}}

-または-

構文:

ng-bind="(input | filter)"

例:

ng-bind="(Collectionstatus | filter:{Value:dt.Status})[0].KeyName"

4

これを試すことができます。私の'name'の機能はarrのプロパティです。

repeat="item in (tagWordOptions | filter:{ name: $select.search } ) track by $index
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.