Angular 收集数据最佳实践答案

【问题标题】：Angular collecting data best practiceAngular 收集数据最佳实践
【发布时间】：2015-09-18 03:43:29
【问题描述】：

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

Insert
Update
Select
Delete
Approve
Full Control
Deny

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

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

提前致谢。

Plnkr

【问题讨论】：

如果您可以“压缩”您的代码以仅显示您需要的一个小示例，那应该会更好。顺便说一句，如果您需要使用数组（重新映射、过滤等），我可以建议使用 Underscore 库 underscorejs.org
为什么不将数据结构展平，然后将其作为活动模型进行处理？
服务器像这样发送数据。你的意思是在客户端变平？ @deostroll

标签： javascript arrays json angularjs angular-data

【解决方案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

【讨论】：