Question

我正在使用AngularUI'独特'过滤器来显示仅包含唯一项目的列表。我的问题是如何计算每个独特结果中的项目数？

e.g。设置是：

colors = [
{name:'black', shade:'dark'},
{name:'white', shade:'light'},
{name:'red', shade:'dark'},
{name:'red', shade:'dark'},
{name:'yellow', shade:'light'}
]

在视图中：

<li ng-repeat="color in colors | unique:'name'">{{color.name}}</li>

给出：

<li>black</li>
<li>white</li>
<li>red</li>
<li>yellow</li>

我还希望在视图中显示黑色计数为1，红色为2，等等。

由于

Answer 1

我不认为过滤器可以通过这种方式改变基础结构。您必须在控制器中预处理集合

以lodash为例

collection = [{name:'a'},{name:'b'},{name:'a'},{name:'c'}];
_.mapValues(_.groupBy(collection, 'name'), function(r) { return r.length; });
Object {a: 2, b: 1, c: 1}

然后在ng-repeat

中迭代集合

Answer 2

以下内容应为您提供包含已过滤列表的属性。从那里你可以调用.length来获取列表的长度

<li ng-repeat="color in filteredList = (colors | unique:'name')">{{color.name}}</li>
<div>{{filteredList.length}}</div>

用于AngularJS的AngularUI计算＆＃34; uniqe＆＃34;过滤结果

2 个答案: