复杂动态表{J}和HTML的结构

Question

我的要求： - （我已根据当前进度制作了fiddle）

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

截至目前，该表格如下所示

正如您在上面所看到的，使用ng-repeat标题（Users，Required Headset等）正在从对象水平/逐列（<th>）和用户列（最左侧）进行迭代也正在垂直/行方向动态迭代（<tr>）。 “用户”标题始终是唯一已知的第一列，但其值将再次为动态。

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

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

  

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

我的问题：

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

到目前为止我做了什么：

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

$scope.rowData

PS：在此对象中，我尝试创建唯一键（$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: "" } ... ]; 和u_req_headset），以便我可以在u_primary_contact_number中使用它们以便稍后获取更新的字段值，但目前无法让它发挥作用。

使用上面的对象，在HTML中我正在迭代它们，如下所示

ng-model

我面临的问题，我将不胜感激任何帮助：

根据目前的解决方案，我面临的问题是：（第一是最重要的）

• 唯一地绑定每个字段的值以获取保存时每个字段值的方法。显然，如果我使用<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> ，则更改将反映所有行和＆amp;在许多层面上这显然是错误的。我需要使用原型方法，例如：ng-model="something"来自上面的对象，但问题是密钥名称（在这种情况下为“u_req_headset”）不是静态的。对于另一个表数据（动态），它可能是非常不同的。 我只需要一个变量来在row.u_req_headset内单独绑定每个元素，这样我就可以在保存后获取该元素的值

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

• 我确信有更好的方法来构建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'，这对于针对'用户'的所有迭代都是相同的。

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