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

【问题标题】：How to filter by object property in angularJS如何在angularJS中按对象属性过滤
【发布时间】：2013-07-21 13:15:38
【问题描述】：

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

有什么想法吗？非常感谢您的回复。

【问题讨论】：

很好的问题，但代码可以减少，其中很大一部分与问题无关。

标签： javascript angularjs

【解决方案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

【讨论】：

有没有办法通过将自定义过滤器传递给 ng-repeat 语句之外的 ng-click 事件来过滤项目列表？在这种情况下，我想在根据评分过滤的结果上方放置三个“极性”按钮。
我不确定。如果要选择要过滤的极性，可以传递范围变量而不是纯文本：filter:{polarity:polarityToFilter} 其中$scope.polarityToFilter 通过单击三个按钮之一填充。这是你想要做的吗？
这似乎可行。但是，我的应用还需要能够删除单个列表项。
过滤的问题是每次应用过滤器时都会创建一个新数组，这会破坏过滤项与其在未过滤数组中的原始索引之间的联系。有没有办法保持平局，还是 ng-hide 我唯一的选择？这是使用 ng-hide 进行过滤的替代方法的教程：bennadel.com/blog/…
ngRepeat 在您也可以使用的本地范围上公开一个 $index 属性。

【解决方案2】：

您也可以这样做以使其更具活力。

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

那么你的 ng-repeat 会是这个样子

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

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

【讨论】：

【解决方案3】：

documentation 有完整的答案。无论如何，这就是它的完成方式：

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

将仅过滤 data 数组中的 age，而 true 用于精确匹配。

对于深度过滤，

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

$ 是深度过滤器的特殊属性，true 用于与上述完全匹配。

【讨论】：

简单干净。
这个过滤器是内置的还是需要用 Angular 和 AngularJS 编写？

【解决方案4】：

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

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

【讨论】：

【解决方案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"

【讨论】：