如何按angularJS中的object屬性進行過濾

Question

我試圖在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（極性）”聲明中打印出任何內容。 看來我沒有插入正確的參數來訪問“極性”的對象屬性。

有任何想法嗎？ 非常感謝您的回復。

Answer 1

您只需使用filter器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>

小提琴

Answer 2

文檔有完整的答案。 無論如何，這是如何做到的：

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

將僅過濾data數組中的age ，而true則用於完全匹配。

對於深度過濾，

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

$是深度過濾器的特殊屬性， true用於完全匹配，如上所述。

Answer 3

您也可以這樣做，使其更具動態性。

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

然后你的重復將看起來像這樣

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

該濾波器當然僅用於按極性濾波

Answer 4

我們有如下收藏：

句法：

{{(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"

Answer 5

你可以試試這個。 它為我工作'名字'是arr的財產。

repeat="item in (tagWordOptions | filter:{ name: $select.search } ) track by $index