javascript - Angular 收集数据最佳实践

我有一个数据表，它表示有关用户授权的一些​​信息。在表的头部有 Action 类型，例如:

Insert
Update
Select
Delete
Approve
Full Control
Deny

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

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

提前致谢。

Plnkr

最佳答案

在展平数据集后尝试，然后使用展平的 View 。

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

[
  {
    "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);
      }
    }

  }

普拉克:http://plnkr.co/edit/XFPuSQnRwe2YgB6EtfHa?p=preview