复杂动态 table 的 JSON 和 HTML 的结构

Question

我的要求： - （我已经创建了一个 fiddle 我目前的进度）

我有一个 angular[1.4.0] 应用程序，我需要在其中填充 table 及其内容动态，包括 header 名称及其相应的值使用从后端 (ServiceNow) 发送的 json object。

截至目前，table 看起来如下所示

正如您在上面看到的，使用 ng-repeat headers（用户、所需耳机等）正在从 object horizontally/column-wise（<th>) 并且用户列（最左边）也在动态迭代 vertically/row-wise(<tr>)。 'User' header 将始终是唯一已知的第一列，但其值将再次动态变化。

接下来，每个header下的元素也是unknown/dynamic，也就是说"Required Headset"列下的元素是否应该是selectbox/textbox/checkbox是由数据决定的来自后端。

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

So basically, the number of users should determine the number of rows and each row will have varied inputs/elements for each columns. Later the consumer enters the values in the fields and saves the updated data.

我的问题：

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

到目前为止我做了什么：

由于用户正在迭代 row-wise 不同于其他正在迭代的 column-wise（header 名称及其下的相应元素），我创建了 2 object即，$scope.users 是一个数组，$scope.rowData 是一个包含 column-wise 详细信息的 object 数组，如下所示。

$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：在这个 object 中，我尝试创建唯一键（u_req_headset 和 u_primary_contact_number），以便我以后可以在 ng-model 中使用它们获取更新的字段值，但目前无法使其正常工作。

使用上面的 objects，在 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 来自上面的 object 但问题又是键名（在本例中为 "u_req_headset"）不是静态的。对于另一个 table 数据（动态），它可能非常不同。 我只需要一个变量来单独绑定 ng-repeat 中的每个元素，这样我就可以稍后在保存时获取该元素的值
很快我也打算为这些动态字段添加验证。
我确信有更好的方法来构造 json 并根据我的要求填充数据。

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

Answer 1

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

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

Answer 2

它不起作用的原因是因为您使用的模型是 'row.answer'，这对于针对 'users'.

的所有迭代都是相同的

修复了 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>

复杂动态 table 的 JSON 和 HTML 的结构

Structure of the JSON and HTML for a complex dynamic table

jquery

html

angularjs

servicenow