Javascript 在angularjs中显示聚合列表

在我的模型中，我的数据类似于：

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

我想用复选框显示标记列表（包含唯一的“tag1”和“tag2”值）。希望是这样的：

<div ng-repeat="tag in list.tags">
    <label class="checkbox">
        <input type="checkbox" ng-model="filter.tag" />
        {{tag}}
    </label>
</div>

{{tag}}

---

如果我硬编码列表，我知道如何根据检查的内容过滤主列表，但不知道如何自动生成唯一标记列表。

您希望执行三个操作：

• 从

  $scope.list

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

您可以使用纯JavaScript来实现这一点，但为了让事情变得更简单，我建议使用一个库，它允许您访问许多用于操作和检查数组、对象等的函数

让我们从以下代码开始：

$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

中的每个对象获取数组。下划线提供了方法，这正是我们所需要的

采摘

..pulk（列表，属性名称）

map最常见用例的一个方便版本：提取属性值列表

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

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

现在，我们要展平该阵列

展平

展平（数组，[shall]）

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

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

uniq

uniq（数组、[isSorted]、[iterator]）

别名：

唯一

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

我们可以将它们与下划线的有用方法结合起来，将它们链接在一起。让我们在作用域上创建一个函数，返回唯一的标记：

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

由于这是一个函数，因此无论我们在事件发生后添加或删除

$scope.list

中的项目，它都将始终返回唯一的标记

现在，您可以使用

uniqueTags

上的

ng repeat

来显示每个标记：

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

{{tag}}

---

下面是一个正在工作的JSFIDLE，它演示了这项技术：

使用自定义过滤器获得一组独特的标记/数组，适合与ng repeat一起使用：

.filter('uniqueTags', function() {
    return function(list) {
        var tags = {};
        angular.forEach(list, function(obj, key) {
            angular.forEach(obj.tags, function(value) {
                tags[value] = 1;
            })
        });
        var uniqueTags = []
        for (var key in tags) {
            uniqueTags.push(key);
        }
        return uniqueTags;
    }
});

我首先将标签放入一个对象中，它会自动为我们提供唯一性。然后我把它转换成一个数组

使用方法如下：

<div ng-repeat="tag in list | uniqueTags">

---

以下内容可能不会达到我认为您可能希望/期望的效果：

<input type="checkbox" ng-model="filter.tag">

---

这不会在控制器范围（即使用ng repeat的范围）上创建$scope属性

filter.tag1

和

filter.tag2

。ng repeat的每次迭代都会创建自己的子作用域，因此上面的ng模型将在每个ng repeat子作用域上创建作用域属性

filter.tag

，如我的小提琴所示。

完美！这也是一个很好的解释！谢谢很高兴能帮忙^_^使用这种聚合函数的性能如何？Angular多久调用一次函数？

<div ng-repeat="tag in list | uniqueTags">

<input type="checkbox" ng-model="filter.tag">