如何在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 2014年

Answers:


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事件来过滤项目列表?在这种情况下,我想在基于评级过滤的结果上方放置三个“极性”按钮。
sh3nan1gans 2013年

2
我不太确定。如果您想选择极性过滤器,你可以传递的,而不是一个纯文本范围的变量:filter:{polarity:polarityToFilter}这里$scope.polarityToFilter是一个充满点击上的三个按钮中的一个。这是您要做什么?
Blackhole

这似乎可行。但是,我的应用还需要能够删除单个列表项。
sh3nan1gans

过滤的问题在于,每当应用过滤器时都会创建一个新数组,这会破坏过滤后的项目与其未过滤数组中原始索引之间的联系。有没有办法维持领带,还是ng-hide是我唯一的选择?下面是一个替代的教程可通过使用纳克隐藏过滤: bennadel.com/blog/...
sh3nan1gans

ngRepeat公开了$index您也可以使用的本地范围的属性。
Blackhole

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

这个过滤器是内置的还是需要同时用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"

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.