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

【问题标题】：Creating check box grid using ng-repeat使用 ng-repeat 创建复选框网格
【发布时间】：2015-09-04 17:09:46
【问题描述】：

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.）。但是这里每个模块的类别数量不同。您能否建议一种实现此功能的方法？

需要先找到类别的数量，并在表格中显示为表头
在正确的位置显示复选框

【问题讨论】：

我认为最好的方法是使用 ui-grid 或任何类型的网格；）
@Radu，ui-grid 不支持 firefox
我正在考虑编写代码需要一些时间，但解决方案是这样想的。如果您一开始无法拥有类别，则可以使用 2 个 foreach 获得类别。然后，您显示一行包含类别的行，接下来您将有一个 ng 重复，使用引导程序您可以用 cols 划分屏幕，这样当该模块的类别没有数据时，您可以使用 ng-hide。

标签： angularjs angularjs-ng-repeat ng-repeat

【解决方案1】：

可以对函数的结果进行 ng-repeat 迭代 - 与作用域中的数组字段相反 - 如下所示：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：