如何在angularJS中按对象属性过滤

Question

如何在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（polarity）”语句中不会打印任何内容。似乎我没有插入正确的参数来访问“极性”的对象属性。

有任何想法吗？非常感谢您的回复。

Answer 1

您只需要使用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>将仅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"/>然后您ng-repeat会像这样<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"