显示包含二维数组中唯一项的列表

Question

我正在尝试根据我的角度应用程序中的recipe-resource创建一个标签列表。

这是我的数据：

[
    {
        title: "meatballs",
        tags: [
           {
               name: "meat"
           },
           {
               name: "pasta"
           }
        ]
    },
    {
        title: "Seabass",
        tags: [
           {
               name: "fish"
           },
           {
               name: "pasta"
           }
        ]
    }
]

如何从这个二维数组中显示包含唯一标签的列表？

像

这样的东西

<div ng-repeat="recipe in recipes | unique:tags:name">
    <div ng-repeat="tag in recipe">{{ tag.name }}</div>
</div>

输出：

meat
pasta
fish

Answer 1

最直接的方法是使用数组存储标记（例如$scope.tags = []）。

然后只需遍历所有唯一值，并将它们添加到$scope.tags（如果它们尚未存在）。

的 Here's an example...

JS：

$scope.tags = [];
var data = [
    {
        title: "meatballs",
        tags: [{name: "meat"},{name: "pasta"}]
    },
    {
        title: "Seabass",
        tags: [{name: "fish"},{name: "pasta"}]
    }
];

for (var i = 0; i < data.length; i++) {
    var current = data[i];
    for (var j = 0; j < current.tags.length; j++) {
        var tag = current.tags[j].name;
        if ($scope.tags.indexOf(tag) === -1) {
            $scope.tags.push(tag);
        }
    }
}

HTML：

<ul>
    <li ng-repeat="tag in tags">{{tag}}</li>
</ul>

Answer 2

对于像这样的数组操作，我非常喜欢lodash。

var data = []; // your data

var out = _.chain(data).map(function (value) {
  return value.tags;
}).flatten().pluck("name").uniq().value();

基本上，获取标记数组，展平结果，将name属性插入数组，删除重复项，然后返回结果。

Answer 3

在您的控制器中，从recipe-resource收到数据后，请写一个过滤器：

$scope.tags = {};
for (var i=0; i<data.length; ++i)
    for (var t=0; t<data[i].tags.length; ++t)
        $scope.tags[data[i].tags[t].name] = true;

然后使用单行div显示它们：

<div ng-repeat="tag in tags">{{ tag }}</div>