[英]Creating tables with Angular.js
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-show
directive. 我使用
ng-show
指令工作。 But that still renders an extra cell, just hidden. 但这仍然是一个额外的细胞,只是隐藏。 It would be ideal to have the table properly rendered.
使表格正确呈现是理想的。
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? 有什么建议?
Normally you could use ng-switch for 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. 幸运的是,有人制作了一个名为'if'的指令,它只对元素采用一个属性并有条件地从DOM中添加/删除它。 It's genius :-).
这是天才:-)。
Here's an example of it (look in the 'Resources' panel on the side, I included it from github). 这是一个例子(在侧面的'Resources'面板中查看,我从github中包含它)。 http://jsfiddle.net/5zZ7e/ .
http://jsfiddle.net/5zZ7e/ 。
I also showed how you can make your controllers without global variables in there. 我还展示了如何在没有全局变量的情况下制作控制器。
Answering question using more recent version of Angular. 使用更新版本的Angular回答问题。
As Andrew Joslin wrote, the ng-show hides the element (it applies display: none
). 正如Andrew Joslin写的那样, ng-show隐藏了元素(它应用
display: none
)。 ng-switch removes non-matching elements instead of just hiding them. ng-switch删除不匹配的元素而不是隐藏它们。 But it also requires extra element for
switch-when
expression. 但它也需要额外的元素用于
switch-when
表达式。
Since the last answer, the ng-if has 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.