使用ng-repeat

Question

Json结构，

[
    {
        "name": "module1",
        "categories": [
            {
                "name": "cat1"
            },
            {
                "name": "cat4"
            }
        ]
    },
    {
        "name": "module2",
        "categories": [
            {
                "name": "cat3"
            },
            {
                "name": "cat4"
            }
        ]
    },
    {
        "name": "module3",
        "categories": [
            {
                "name": "cat1"
            },
            {
                "name": "cat2"
            },
            {
                "name": "cat4"
            }
        ]
    }
]

使用这个Json结构，我需要显示一个复选框网格，如下所示，

点击任何复选框，我应该能够提醒相应的类别＆amp;模块名称。如果每个模块都有四个类别，那么我可以轻松地使用嵌套的ng-repeat并显示结构（您可以检查它here。）。但是这里每个模块的类别数量不同。您能否建议一种实现此功能的方法？

1. 首先需要查找类别数并将其显示为表格中的标题
2. 正确显示复选框

Answer 1

可以对函数的结果进行ng-repeat迭代 - 与范围中的数组字段相比 - 如下所示：

<tr ng-repeat="module in getAllModules()">
  <td ng-repeat="cat in getAllCategories()">
     <!-- display checkbox here if required -->
  </td>
</tr>

我认为应该清楚如何实现这两种方法。但是，您必须考虑所涉及的性能开销，因为模块和类别的总计集一次又一次地计算。

Answer 2

我认为lex的回答是正确的。如果我理解他的解决方案，getAllCategories方法是有趣的部分。它必须返回所有类别，而getAllModules仍然可以返回模块Array。

    <tr ng-repeat="module in modules">
      <td ng-repeat="cat in getAllCategories()">
        <input type="check" ng-if="module.containsCat(cat)">
      </td>
   </tr>

使用containsCat方法类似

$scope.containsCat = function(module, cat){
    for each(var moduleCat in module.categories ){
        if(moduleCat.name === cat) return true;
    }
    return false;
}