如何在 angularJS 中根据对象属性进行过滤

我试图在 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 (polality)”语句中输出任何内容。似乎我没有插入正确的参数来访问“极性”的对象属性

有什么想法吗? 非常感谢你的回应。

257470 次浏览

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

您也可以这样做,使其更具动态性。

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

然后你就会变成这个样子

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

这个过滤器当然只能用于极性过滤

文件有完整的答案。不管怎样,它是这样做的:

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

将只过滤 data阵列中的 agetrue是为了完全匹配。

为了进行深度过滤,

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

$是深度过滤器的一个特殊属性,而 true是像上面那样精确匹配的。

你可以试试这个。它的工作为我 名字是一个属性在 arr。

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

我们的收藏品如下:


enter image description here

语法:

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