9

我正在尝试使用 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，如前所述，不适用于具有严格解析的某些元素（即：仅允许某些标签的表）

有什么建议吗？

4

2 回答 2

6

通常你可以使用ng-switch来做这样的事情，它有条件地从 DOM 中添加/删除东西，不像 ng-show/ng-hide 只是隐藏/显示东西。

但是 ng-switch 不能很好地处理表格，因为它需要一个额外的元素用于 switch 语句。

幸运的是，有人制定了一个名为“if”的指令，它只接受元素的一个属性，并有条件地从 DOM 中添加/删除它。这是天才:-)。

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

我还展示了如何制作没有全局变量的控制器。

于 2012-07-07T14:18:53.483 回答
1

使用更新版本的 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>

于 2015-04-25T07:49:34.287 回答