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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (163)

我试图在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 e.twets”数组:

{{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;
};
});

此方法返回一个空数组。从“控制台.日志(极性)”语句中没有打印任何内容。似乎我没有插入正确的参数来访问“极性”的对象属性。

提问于
用户回答回答于

<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>
用户回答回答于

<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和上面的完全匹配。

扫码关注云+社区