javascript 使用 Angular.js 创建表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11367769/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating tables with Angular.js
提问by The Who
I am trying to create a table with Angular.js which will have cell's spanning many rows.
我正在尝试使用 Angular.js 创建一个表格，该表格将包含跨多行的单元格。
Example:
例子：
http://jsfiddle.net/famedriver/kDrc6/
http://jsfiddle.net/famedriver/kDrc6/
Example data
示例数据
var data = [{Colors: ["red","green","blue"]}]
Expected output
预期输出
<table>
<tr>
<td rowspan="3">Colors</td>
<td>red</td>
</tr>
<tr>
<td>green</td>
</tr>
<tr>
<td>blue</td>
</tr>
</table>
I have it working by using the ng-showdirective. But that still renders an extra cell, just hidden. It would be ideal to have the table properly rendered.
我通过使用ng-show指令让它工作。但这仍然会呈现一个额外的单元格，只是隐藏了。正确呈现表格将是理想的。
ng-switch, as mentioned, won't work in certain elements with strict parsing (ie: a table which only allows certain tags)
ng-switch，如前所述，不会在某些元素中使用严格解析（即：只允许某些标签的表）
Any advice?
有什么建议吗？
采纳答案by monnef
Answering question using more recent version of Angular.
使用更新版本的 Angular 回答问题。
As Andrew Joslin wrote, the ng-showhides the element (it applies display: none). ng-switchremoves non-matching elements instead of just hiding them. But it also requires extra element for switch-whenexpression.
正如 Andrew Joslin 所写，ng-show隐藏了元素（它适用display: none）。ng-switch删除不匹配的元素，而不是仅仅隐藏它们。但它也需要额外的元素来switch-when表达。
Since the last answer, the ng-ifhas become a part of Angular, you no longer need an external library.
自从上一个答案以来，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>回答by Andrew Joslin
Normally you could use ng-switchfor something like this, which conditionally adds/removes things from the DOM, unlike ng-show/ng-hide which just hide/show things.
通常你可以使用ng-switch来做这样的事情，它有条件地从 DOM 中添加/删除东西，不像 ng-show/ng-hide 只是隐藏/显示东西。
But ng-switch doesn't play nice with tables because it requires an extra element for the switch statement.
但是 ng-switch 不能很好地处理表格，因为它需要为 switch 语句添加一个额外的元素。
Luckily, someone made a directive called 'if'which just takes one attribute on an element and conditionally adds/removes it from the DOM. It's genius :-).
幸运的是，有人创建了一个名为“if”的指令，它只在元素上取一个属性，并有条件地从 DOM 中添加/删除它。这是天才:-)。
Here's an example of it (look in the 'Resources' panel on the side, I included it from github). http://jsfiddle.net/5zZ7e/.
这是它的一个示例（查看侧面的“资源”面板，我从 github 中包含了它）。http://jsfiddle.net/5zZ7e/。
I also showed how you can make your controllers without global variables in there.
我还展示了如何制作没有全局变量的控制器。
