复杂动态表的 JSON 和 HTML 结构

Question

我的要求： - （我创建了一个fiddle 与我当前的进度）

我有一个 angular[1.4.0] 应用程序，我需要使用从后端发送的 json 对象（ServiceNow）动态 填充表及其内容，包括标题名称及其对应值)。

截至目前，表格如下所示

正如您在上面看到的，使用ng-repeat，标题（用户、所需耳机等）正在从对象水平/列（<th>）迭代，并且用户列（最左边）也在迭代动态垂直/逐行（<tr>）。 “用户”标题始终是唯一已知的第一列，但它的值将再次是动态的。

接下来，每个标题下的元素也是未知/动态的，这意味着“必需耳机”列下的元素是否应该是选择框/文本框/复选框，由来自后端的数据决定。

此外，我显然需要单独控制这些元素，这意味着我需要为每个动态字段提供唯一的 ng-model，这可以通过原型方法实现，但在这种复杂的情况下，我不确定如何实现。

所以基本上，用户数应该决定行数，并且每一行的每一列都有不同的输入/元素。稍后消费者在字段中输入值并保存更新的数据。

我的问题：

构造 JSON 并相应地迭代 HTML 中的项目以获得上述要求的最佳方法是什么。

到目前为止我做了什么：

由于用户逐行迭代不同于其他逐列迭代（标题名称及其下的相应元素），我创建了 2 个对象，即 $scope.users 这是一个数组和 $scope.rowData 这是一个数组是一个包含按列详细信息的对象数组，如下所示。

$scope.rowData = [
{
   column_name: "Required Headset",
   options: ["one", "two", "three"],
   required: "true",
   type: "select",
   u_req_headset: ""
},
{
   column_name: "Primary Contact Number",
   options: [],
   required: "true",
   type: "text",
   u_primary_contact_number: ""
}
...
];

PS：在这个对象中，我尝试创建唯一键（u_req_headset 和 u_primary_contact_number），以便我可以在 ng-model 中使用它们，以便稍后获取更新的字段值，但目前无法使其工作。

使用上面的对象，我在 HTML 中迭代这些对象，如下所示

<table class="table">
    <thead>
        <tr>
           <th>User</th>
            <th ng-repeat="m in rowData">
                {{m.column_name}}
            </th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="user in users track by $index">
            <td>{{user}}</td>
            <td ng-repeat="row in rowData track by $index">
                <input ng-if="row.type == 'text'" type="text" />

                <input type="checkbox" ng-if="row.type == 'checkbox'"/>

                <select ng-if="row.type == 'select'">
                    <option ng-repeat="option in row.options" value="{{option}}">{{option}}</option>
                </select>
            </td>
        </tr>
    </tbody>
</table>

我面临的问题，如果能提供任何帮助，我将不胜感激：

使用当前的解决方案，我面临的问题是：（第一个是最重要的）

• 唯一绑定每个字段的值以在保存时获取每个字段值的方法。显然，如果我使用ng-model="something"，则更改将反映所有行，这在许多级别上显然是错误的。我需要使用原型方式，例如：来自上述对象的row.u_req_headset 但问题再次是键名（在这种情况下为“u_req_headset”）不是静态的。对于另一个表数据（动态），它可能会非常不同。 我只需要一个变量来单独绑定ng-repeat 中的每个元素，以便稍后保存时获取该元素的值

• 很快我还计划向这些动态字段添加验证。

• 我确信有更好的方法来构建 json 并根据我的要求填充数据。

解释可能有点复杂或令人困惑，但不幸的是我的要求也是如此，所以我创建了一个Fiddle 来复制我目前的情况。非常感谢任何帮助。

Answer 1

它不起作用的原因是因为您使用的模型是“row.answer”，这对于针对“用户”的所有迭代都是相同的。

修复了fiddle。

<tr ng-repeat="user in users">
  <td>{{user.name}}</td>
  <td ng-repeat="row in rowData">
    <input ng-model="user.answer" ng-if="row.type == 'text'" type="text" />

    <input ng-model="user.check" type="checkbox" ng-if="row.type == 'checkbox'" />

    <select ng-model="user.selected" ng-if="row.type == 'select'">
      <option ng-repeat="option in row.options" value="{{option}}">{{option}}</option>
    </select>
  </td>
</tr>

Answer 2

我对你的问题有点困惑，但我认为你需要这个。

<tr ng-repeat="user in users track by $index">

     <td>{{user}}</td>

     <td ng-repeat="row in rowData track by $index">

        <input ng-if="row.type == 'text'" type="text" ng-model="row.answer"/>

        <input type="checkbox" ng-if="row.type == 'checkbox'" ng-model="row.answer"/>

        <select ng-if="row.type == 'select'" ng-model="row.answer">
         <option ng-repeat="option in row.options" value="{{option}}">{{option}}</option>
        </select>

    </td>
</tr>

所以这里发生的是，您的原始对象 $scope.rowData 被用户提供的答案修改，如下所示：

    [{
        column_name: "Required Headset",
        options: ["one", "two", "three"],
        required: "true",
        type: "select",
        u_req_headset: "",
        answer: "answer1"
    }, {
        column_name: "Primary Contact Number",
        options: [],
        required: "true",
        type: "text",
        u_primary_contact_number: "",
        answer: "answer2"
    }];