Question

我正在尝试使用ng-repeat来创建嵌套对象中键的复选框列表。

我的对象像是：

   $scope.kids = [
            { 
                "name": "Will", 
                "age": 6,
                "skills": {
                    "dancing": false,
                    "coloring": true
                }
            },{ 
                "name": "Sally", 
                "age": 7,
                "skills": {
                    "dancing": false,
                    "coloring": true,
                    "runnning": true
                 }
              }
            ];

我希望在＆＃34;技能＆＃34;中找到一个独特的键列表。每个技能仅列出一次的对象，而不是每个孩子一次。（即＆＃34;跳舞＆＃34;，＆＃34;着色＆＃34;，＆＃34;跑步＆＃34;）

This很有帮助，但在尝试嵌套重复后仍然无法获得唯一列表

这是我目前对 JSFiddle

的尝试

谢谢！

Answer 1

修改您的HTML

我认为你需要更改你的HTML，用这个

删除你的ng-repeats

<span ng-repeat="kid in kids">
  <span ng-repeat="(key,skill) in kid.skills">
    <input type="checkbox" ng-modle="{{skill}}"> {{key}}
    <br>
  </span>
</span>

这应该会为您提供连接到正确的$scope和标题的框的列表。

以下是修改后的jsfiddle

的链接

修改

我修改了代码以显示所有孩子的列表，然后在该列表中我们列出了所有孩子的个人技能。它主要是关于理解循环如何工作。

Answer 2

如果我正确地提出了您的问题，那么最好的解决方案就是构建一个过滤器来提取密钥，对它们进行排序并提取唯一值。然后你可以在一次重复中使用它。我分叉你的jsfiddle和added the filter。

我选择使用lodash快速提取值，展平，排序和删除重复项。 Lodash是一个巨大的游乐场，你可以使过滤器更简洁。

由于您可以重复访问此过滤器，因此我建议您使用memoize来避免对过滤器进行冗余评估。一旦计算完毕，就足够了。基本的memoization使用单个键，并且无法考虑其他参数，但您可以覆盖它并考虑所有参数并准确有效地进行记忆。

过滤器的定义如下：

mymodule.filter('uniqueKeys', function(){
return function(input, keyPath){
    return _.unique(_.sortBy(_.flatten( _.map(input,
        function(item){return _.keys(_.get(item, keyPath));}))));
}
});

，转发器将是：

<div ng-repeat="skill in kids | uniqueKeys:'skills'">

请注意，我会传递密钥以找到您的值，如果您有爱好字段，并且您想要提取，则只需写下：

<div ng-repeat="skill in kids | uniqueKeys:'hobbies'">

Ng重复嵌套对象中的键

2 个答案: