在angularjs中显示汇总列表

在angularjs中显示汇总列表

您正在寻找执行三个 *** 作：

• 从中的每个项目获取标签数组

  $scope.list

• 将它们展平为单个阵列
• 从此数组获取唯一值

您可以使用纯Javascript来做到这一点，但是为了使事情变得更容易，我建议您使用Underscore（一个使您可以访问许多用于处理和检查数组，对象等的函数的库）。

让我们从下面的代码开始：

$scope.list = [  {id: 0, tags: ['tag1', 'tag2']},  {id: 1, tags: ['tag2']},  {id: 2, tags: ['tag1', 'tag3', 'tag4']},  {id: 3, tags: ['tag3', 'tag4']}];

现在，让我们执行第一个 *** 作：从中的

tags

属性为每个对象获取数组

$scope.list

。Underscore提供了

pluck

我们所需要的方法。

采摘

_.pluck(list, propertyName)

地图的最常见用例的便捷版本：提取属性值列表。

使用pluck，我们可以获得以下信息：

var tags = _.pluck($scope.list, 'tags');// gives us [['tag1', 'tag2'], ['tag2'], ['tag1', 'tag3', 'tag4'], ['tag3', 'tag4']]

现在，我们要展平该数组。

展平

_.flatten(array, [shallow])

展平嵌套数组（嵌套可以达到任何深度）。如果通过浅层，则阵列将仅展平一个级别。

tags = _.flatten(tags);// gives us ['tag1', 'tag2', 'tag2', 'tag1', 'tag3', 'tag4', 'tag3', 'tag4']

最后，您只需要每个标签的一个实例。

uniq

_.uniq(array, [isSorted], [iterator])

别名：

unique

生成数组的无重复版本，使用===来测试对象是否相等。如果您事先知道该数组已排序，则为isSorted传递true将运行更快的算法。如果要基于转换计算唯一项，请传递迭代器函数。

tags = _.unique(tags)// gives us ['tag1', 'tag2', 'tag3', 'tag4']

我们可以将它们与Underscore的有用

chain

方法结合在一起，以将它们链接在一起。让我们在返回唯一标记的范围内创建一个函数：

$scope.uniqueTags = function() {  return _.chain($scope.list)    .pluck('tags')    .flatten()    .unique()    .value();};

由于这是一个函数，因此无论我们在

$scope.list

事后添加还是删除项，它都将始终返回唯一标签。

现在，您可以使用

ng-repeat

on

uniqueTags

显示每个标签：

<div ng-repeat="tag in uniqueTags()">  <label >    <input type="checkbox" ng-model="filter.tag" />    {{tag}}  </label></div>

这是演示此技术的有效jsFiddle：http :
//jsfiddle.net/BinaryMuse/cqTKG/