添加具有NG-重复和嵌套循环行 [英] Adding rows with ng-repeat and nested loop
本文介绍了添加具有NG-重复和嵌套循环行的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在寻找一种方式将行添加到一个表。我的数据结构,看起来就像是:
I'm looking for a way to add rows to a table. My data structure looks like that:
rows = [
{ name : 'row1', subrows : [{ name : 'row1.1' }, { name : 'row1.2' }] },
{ name : 'row2' }
];
我想创建一个表,看起来像:
I want to create a table which looks like that:
table
row1
row1.1
row1.2
row2
是可能的角度JS NG-再说一遍吗?如果不是这样,这将是这样做的一个角的方式?
Is that possible with angular js ng-repeat? If not, what would be a "angular" way of doing that?
编辑:
拼合的阵列将是一个坏的解决方案,因为如果我可以遍历子元素,我可以使用在细胞内不同的HTML标记,其他CSS类等。
Flatten the array would be a bad solution because if i can iterate over the sub elements i could use different html tags inside the cells, other css classes, etc.
推荐答案
您将无法与NG-重复这样做。你可以用一个指令去做,但是。
You won't be able to do this with ng-repeat. You can do it with a directive, however.
<my-table rows='rows'></my-table>
小提琴。
myApp.directive('myTable', function () {
return {
restrict: 'E',
link: function (scope, element, attrs) {
var html = '<table>';
angular.forEach(scope[attrs.rows], function (row, index) {
html += '<tr><td>' + row.name + '</td></tr>';
if ('subrows' in row) {
angular.forEach(row.subrows, function (subrow, index) {
html += '<tr><td>' + subrow.name + '</td></tr>';
});
}
});
html += '</table>';
element.replaceWith(html)
}
}
});
这篇关于添加具有NG-重复和嵌套循环行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文