javascript - Angular 收集数据最佳实践

Question

我有一个数据表，它表示有关用户授权的一些​​信息。在表格的顶部有一些动作类型，例如：

Insert
Update
Select
Delete
Approve
Full Control
Deny

在表格的左侧有动作类型的名称。例如，当用户在第一行（组织）上单击插入和更新时，将填充新数组。

我想问的是，有没有更好的方法来实现相同的输出？我认为代码看起来很乱，因为使用了嵌套的angular.forEach

提前致谢。

PLNKR

Answer 1

在展平数据集后尝试，然后使用展平视图。

因此，最终结果以如下结构结束：

[
  {
    "name": "Organization",
    "actions": [
      {
        "action": "Insert",
        "checked": true
      },
      {
        "action": "Update",
        "checked": false
      },
      {
        "action": "Select",
        "checked": false
      },
      {
        "action": "Delete",
        "checked": false
      },
      {
        "action": "Approve",
        "checked": false
      },
      {
        "action": "Full Control",
        "checked": false
      },
      {
        "action": "Deny",
        "checked": false
      }
    ]
  },
  {
    "name": "Company",
    "actions": [
      {
        "action": "Insert",
        "checked": false
      },
      {
        "action": "Update",
        "checked": false
      },
      {
        "action": "Select",
        "checked": false
      },
      {
        "action": "Delete",
        "checked": false
      },
      {
        "action": "Approve",
        "checked": false
      },
      {
        "action": "Full Control",
        "checked": true
      },
      {
        "action": "Deny",
        "checked": false
      }
    ]
  },
  {
    "name": "Department One",
    "actions": [
      {
        "action": "Insert",
        "checked": false
      },
      {
        "action": "Update",
        "checked": false
      },
      {
        "action": "Select",
        "checked": false
      },
      {
        "action": "Delete",
        "checked": false
      },
      {
        "action": "Approve",
        "checked": false
      },
      {
        "action": "Full Control",
        "checked": true
      },
      {
        "action": "Deny",
        "checked": false
      }
    ]
  },
  {
    "name": "Department Two",
    "actions": [
      {
        "action": "Insert",
        "checked": false
      },
      {
        "action": "Update",
        "checked": false
      },
      {
        "action": "Select",
        "checked": false
      },
      {
        "action": "Delete",
        "checked": false
      },
      {
        "action": "Approve",
        "checked": false
      },
      {
        "action": "Full Control",
        "checked": false
      },
      {
        "action": "Deny",
        "checked": false
      }
    ]
  }
]

以下函数用于展平：

  function flatten(arr) {
    for (var k = 0, l = arr.length; k < l; k++) {
      var obj = arr[k];
      var rec = {};
      rec.name = obj.name;
      rec.actions = [];
      obj.actions.forEach(function(act, idx) {
        rec.actions.push({
          action: action[idx].text,
          checked: act.isChecked
        });
      });
      vm.records.push(rec);
      if (obj.childs && obj.childs.length) {
        flatten(obj.childs);
      }
    }

  }

Plunk：http ://plnkr.co/edit/XFPuSQnRwe2YgB6EtfHa?p=preview