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

你基本上必须重复这些行，直到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;
  };
});

注意：这仅适用于：

对行，列对进行排序。如果不是，你将不得不对它们进行排序首先，然后将其绑定到表
不适用于稀疏数组。在稀疏数组的情况下，您将不得不创建虚拟对象，在创建时应忽略这些对象表

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

从模型AngularJS

2 个答案: