如何按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过滤器（请参阅documentation）：

<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

Answer 2

documentation有完整的答案。无论如何，这是如何做到的：

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

仅会过滤age数组中的data，而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}}

<强> -OR -

语法：

ng-bind="(input | filter)"

示例：

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

Answer 5

你可以试试这个。它为我工作＆＃39; name＆＃39; 是arr中的一个属性。

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