显示angularjs累计名单 [英] Show an aggregated list in angularjs

问题描述

在我的模型我也有类似的数据：

  $ scope.list = {[ID：0，标签：['TAG1'，'标签2']}，{ID：2，标签：['标签2']}} ;
 

我要显示的标签列表（包含'TAG1'和'标签2的独特价值）与复选框。希望是这样的：

 ＆LT; D​​IV NG重复=标签中list.tags＆GT;
    ＆LT;标签类=复选框＆GT;
        ＆LT;输入类型=复选框NG模型=filter.tag/＆GT;
        {{标签}}
    ＆LT; /标签＆gt;
＆LT; / DIV＆GT;
 

我知道如何根据，如果我硬code列表检查什么来筛选主列表，而不是如何自动生成唯一的标签列表。

解决方案

您正在寻找执行三种操作：

• 获取从每个项目的标签阵列中的 $ scope.list


• 平展这些成一个单一的阵列


• 从这个数组获取唯一值

您可以用纯JavaScript这样做，但为了让事情变得更容易，我会建议使用下划线，可让您访问许多库功能用于操纵和检测数组，对象，等等。

让我们先从这个code：

  $ scope.list = [
  {ID：0，标签：['TAG1'，'标签2']}，
  {ID：1，标签：['标签2']}，
  {ID：2，标签：['TAG1'，'TAG3'，'TAG4']}，
  {ID：3，标签：['TAG3'，'TAG4']}
];
 

现在，让我们进行第一次手术：您可以通过标记数组属性中的每个对象 $ scope.list 。下划线提供 勇气 方法，这正是我们需要的。

  

勇气 _。摘去（列表，propertyName的）

  
  

什么是可能是最常见的用例为图个方便的版本：提取属性值的列表

使用动物内脏，我们可以得到以下几点：

  VAR标签= _.pluck（$ scope.list，'标签'）;
//给我们[['TAG1'，'TAG2']，['TAG2']，['TAG1'，'TAG3'，'TAG4']，['TAG3'，'TAG4']]
 

现在，我们要扁平化数组。

  

扁平化 _。压扁（数组，[浅]）

  
  

展平嵌套阵列（嵌套可以是任何深度）。如果传递浅，阵列将仅被压扁一个级别。

 标签= _.flatten（标签）;
//给我们['TAG1'，'TAG2'，'TAG2'，'TAG1'，'TAG3'，'TAG4'，'TAG3'，'TAG4']
 

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

  

的uniq _ uniq的（数组，[isSorted]，[迭代器]）别名：唯一

  
  

生成阵列的无重复的版本，使用===来测试对象的相等。如果事先知道数组进行排序，通过如此isSorted将运行更快的算法。如果你想计算的基础上变换独特的物品，传递一个迭代器的功能。

 标签= _.unique（标签）
//为我们提供了['TAG1'，'标签2'，'TAG3'，'TAG4']
 

我们可以一起用下划线的有用 链 方法结合这些来链接这些一起。让我们在返回的独特标签的范围创建一个函数：

  $ scope.uniqueTags =功能（）{
  返回_.chain（$ scope.list）
    .pluck（标签）
    .flatten（）
    。独特（）
    。值（）;
};
 

由于这是一个函数，它总是返回唯一的标签，无论我们添加或事后删除 $ scope.list 项目。

现在你可以使用 NG-重复在 uniqueTags 来显示每个标签：

 ＆LT; D​​IV NG重复=标签中uniqueTags（）＆GT;
  ＆LT;标签类=复选框＆GT;
    ＆LT;输入类型=复选框NG模型=filter.tag/＆GT;
    {{标签}}
  ＆LT; /标签＆gt;
＆LT; / DIV＆GT;
 

下面是一个工作的jsfiddle演示这项技术： http://jsfiddle.net/BinaryMuse/cqTKG/

In my model I have data similar to:

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

I want to show a list of tags (contains unique values of 'tag1' and 'tag2') with checkboxes. Hopefully something like:

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

I know how to filter the main list based on whats checked if I hard code the list, but not how to generate the list of unique tags automatically.

解决方案

You are looking to perform three operations:

• Get the array of tags from each item in $scope.list
• Flatten these into a single array
• Get the unique values from this array

You can do this with pure JavaScript, but to make things easier, I would recommend using Underscore, a library that gives you access to many functions for manipulating and inspecting arrays, objects, and so forth.

Let's start with this code:

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

Now, let's perform the first operation: get the array from the tags property for each object in $scope.list. Underscore provides the pluck method, which is just what we need.

pluck _.pluck(list, propertyName)

A convenient version of what is perhaps the most common use-case for map: extracting a list of property values.

Using pluck, we can get the following:

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

Now, we want to flatten that array.

flatten _.flatten(array, [shallow])

Flattens a nested array (the nesting can be to any depth). If you pass shallow, the array will only be flattened a single level.

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

Finally, you only want one instance of each tag.

uniq _.uniq(array, [isSorted], [iterator]) Alias: unique

Produces a duplicate-free version of the array, using === to test object equality. If you know in advance that the array is sorted, passing true for isSorted will run a much faster algorithm. If you want to compute unique items based on a transformation, pass an iterator function.

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

We can combine these together with Underscore's useful chain method to chain these together. Let's create a function on the scope that returns the unique tags:

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

Since this is a function, it will always return the unique tags, no matter if we add or remove items in $scope.list after the fact.

Now you can use ng-repeat on uniqueTags to show each tag:

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

Here is a working jsFiddle that demonstrates this technique: http://jsfiddle.net/BinaryMuse/cqTKG/

这篇关于显示angularjs累计名单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！