使用 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 结构，我需要显示一个复选框网格，如下所示，

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

需要先求出类别数，显示为table
在正确的位置显示复选框

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 方法就是有趣的部分。它必须 return 所有类别，而 getAllModules 仍然可以 return 您的模块数组。

    <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;
}

使用 ng-repeat 创建复选框网格

Creating check box grid using ng-repeat

angularjs

ng-repeat

angularjs-ng-repeat