从模型 AngularJS 创建表

Question

我需要一些帮助来使用 Angular 模型呈现 html 表格。

首先，我有一个模型指定我需要呈现一个表格，以及一个需要在表格中显示的“问题”列表。

数据示例：

   {

    "Id": 25546,
    "questionType": "Table",
    "maxRows": 2,
    "maxCols": 3,
    "questionsInTable": [{
        "isActive": true,
        "questionText": "Table Title",
        "validation": "false",
        "rowPosition": 1,
        "colPosition": 1,
        "isPrintable": true,
        "Answer": null,
        "Type": "Label"
    }, {
        "isActive": true,
        "questionText": "2014",
        "validation": "false",
        "rowPosition": 1,
        "colPosition": 2,
        "isPrintable": true,
        "Answer": null,
        "Type": "Label"
    }, {
        "isActive": true,
        "questionText": "2013",
        "validation": "false",
        "rowPosition": 1,
        "colPosition": 3,
        "isPrintable": true,
        "Answer": null,
        "Type": "Label"
    }, {
        "isActive": true,
        "questionText": "Another description here",
        "validation": "false",
        "rowPosition": 2,
        "colPosition": 1,
        "isPrintable": true,
        "Answer": null,
        "Type": "Label"
    }, {
        "isActive": true,
        "questionText": "DescFor2014",
        "validation": "true",
        "rowPosition": 2,
        "colPosition": 2,
        "isPrintable": true,
        "Answer": null,
        "Type": "InputText"
    }, {
        "isActive": true,
        "questionText": "DescFor2013",
        "parentQuestion": 25546,
        "validation": "true",
        "rowPosition": 2,
        "colPosition": 3,
        "isPrintable": true,
        "Answer": null,
        "Type": "InputText"
    }]
}

每个项目（或问题）都提供表格中的行和列位置，数据也有两个项目，其中行和列的最大值。我可以使用 MaxRows 和 MaxCols 数据创建表格，但我很难将问题插入到正确的单元格中。

结果应该是上面的例子：

渲染输出示例：

<table>
<tr>
    <td>Table Title</td>
    <td>2014</td>
    <td>2013</td>
</tr>
    <tr>
        <td>Another description here</td>
        <td>DescFor2014</td>
        <td>DescFor2013</td>
    </tr>
</table>

有没有办法做到这一点？

感谢您的帮助，或者如果您能指出我正确的方向。

Answer 1

我为您的解决方案创建了一个 Plunkr - http://plnkr.co/edit/4vUm8yRiDKlTM8lnQH7E?p=preview。

要为表创建行/列，我创建了 2 个数组 - 行和列。

      $scope.rows = [];
          for (var i=0;i<$scope.tableData.maxRows;i++) {
          $scope.rows.push(i);
      }

      $scope.cols = [];
          for (var i=0;i<$scope.tableData.maxCols;i++) {
          $scope.cols.push(i);
      }

HTML 已保存为：

<table>
  <tr ng-repeat="i in rows">
    <td ng-repeat="j in cols">
      <div table-pos object="tableData.questionsInTable" row="i" col="j"></div>
    </td>
  </tr>
</table>

table-pos 是一个指令，它将接受问题数组、行和列索引作为范围属性。我使用 underscore.js 从问题集合中提取正确的对象并显示该位置的问题（基于 rowPosition 和 colPosition）。代码如下：

.directive("tablePos", function() {
  return {
  template: "<div>{{data}}</div>",
  scope: {
    object: "=",
    row: "=",
    col:"="
  },
  link: function(scope) {
    var questions = scope.object; 
    var question= _.findWhere(questions, {colPosition:scope.col+1, rowPosition: scope.row+1});
    scope.data = question.questionText;
  }
  }
})

使用该指令的主要优点是不要求列表中的问题按任何顺序排序。因此，您可以在数组中以任何顺序添加问题。只要正确定义了 rowPosition 和 colPosition，指令就会选择它。
此外，该指令还支持空单元格/稀疏数组，因此如果不存在针对特定单元格的任何问题，该指令将显示空数据。

一个缺点是，如果超过 1 个问题具有相同的 rowPosition 和 colPosition，则只会选择第一个问题，其余问题将被忽略。

请注意，如果您不这样做不想使用 underscope.js，您仍然可以使用纯 JavaScript 从列表中检测正确的问题。但是，使用 underscore.js 会更容易，因为底层逻辑是抽象的。

Answer 2

请参考这个Plunk：http://plnkr.co/edit/xTagjy1n9tl0CvnDH5Q3?p=preview

你基本上必须 ng-repeat 行直到 maxRows 和 ng-repeat cols 直到 maxCols：

<table>
  <tr ng-repeat="i in [] | range:(tableData.maxRows)">
    <td ng-repeat="j in [] | range:(tableData.maxCols)">
      {{tableData.questionsInTable[j + i*tableData.maxCols].questionText}}
    </td>
  </tr>
</table>

范围是一个过滤函数：

 angular.module('app').filter('range', function() {
  return function(input, total) {
    total = parseInt(total);
    for (var i=0; i<total; i++)
      input.push(i);
    return input;
  };
});

注意：这仅在以下情况下有效：

1. 行、列对已排序。如果不是，您将不得不对它们进行排序 先绑定到表上

2. 不适用于稀疏数组。在稀疏数组的情况下，您将必须创建虚拟对象，在创建时应忽略这些对象 桌子

在继续之前，还要在您发布的问题中验证您的 JSON 对象。它看起来不正确： http://jsonlint.com/