使用Angular.js创建表格

Question

我正在尝试使用Angular.js创建一个表格，其中的单元格将跨越多行。

例如：

http://jsfiddle.net/famedriver/kDrc6/

示例数据

var data = [{Colors: ["red","green","blue"]}]

预期输出

<table>
  <tr>
    <td rowspan="3">Colors</td>
    <td>red</td>
  </tr>
  <tr>
     <td>green</td>
  </tr>
  <tr>
     <td>blue</td>
  </tr>
 </table>

我已经使用ng-show指令使其正常工作。但是这样会渲染一个额外的单元格，只是隐藏了起来。最好能够正确呈现表格。

如先前提到的，ng-switch在某些具有严格解析要求的元素中不起作用（例如：只允许特定标签的表格）。

有什么建议吗？

- The Who

Answer 1

通常情况下，您可以使用 ng-switch 来实现此类功能，它可以有条件地向DOM添加/删除内容，而不像 ng-show/ng-hide 只是隐藏/显示内容。

但是，ng-switch 在处理表格时会遇到问题，因为它需要一个额外的元素来作为 switch 语句。

幸运的是，有人制作了一个名为 'if' 的指令，它只需要在元素上添加一个属性，就可以有条件地向DOM添加/删除它。这真是太棒了 :-).

以下是一个示例（请查看侧边的“资源”面板，我从 github 中包含了它）。http://jsfiddle.net/5zZ7e/。

我还展示了如何在其中不使用全局变量创建控制器。

- Andrew Joslin

---

一个 if 语句... 多么有用和优雅。非常感谢。 - The Who

感谢您关于 ngm-if 的绝妙提示。我很喜欢它。 - Dmitry Evseev

为什么你的JavaScript代码，即控制器，是匿名函数？我不是在质疑它，而是想学习。 - Kevin Meredith

Answer 2

使用更新版本的Angular回答问题。

正如Andrew Joslin所写，ng-show隐藏元素（它应用display:none）。 ng-switch不仅可以隐藏元素，还可以删除不匹配的元素。但是，它还需要额外的元素来表达switch-when。

自上次回答以来，ng-if已成为Angular的一部分，您不再需要外部库。

(function(win) {
  angular.module('myApp', [])
    .controller("Tester", function($scope) {
      $scope.data = {
        Colors: ["red", "green", "blue"]
      }
    })
}(window));

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="myApp">
  <h1>old code converted</h1>
  <p>Just converted to a newer AngularJS.</p>
  <table border="1" ng-controller="Tester">
    <tbody ng-repeat='(what,items) in data'>
      <tr ng-repeat='item in items'>
        <td rowspan="{{items.length}}" ng-show="$first">{{what}}</td>
        <td>{{item}}</td>
      </tr>
    </tbody>
  </table>
  <h1>solution via ng-if</h1>
  <table border="1" ng-controller="Tester">
    <tbody ng-repeat='(what,items) in data'>
      <tr ng-repeat='item in items'>
        <td rowspan="{{items.length}}" ng-if="$first">{{what}}</td>
        <td>{{item}}</td>
      </tr>
    </tbody>
  </table>
</div>

- monnef