我有这个清单,想在ng-table上显示。
$scope.list = [
{
"moduleId": 1,
"name": "Perancangan",
"level": 0,
"childs": [
{
"moduleId": 12,
"name": "Perancangan Sektor",
"level": 1,
"childs": [],
"links": [
{
"rel": "self",
"href": "http://103.8.160.34/mrf/modules/1"
}
]
}
]
},
{
"moduleId": 2,
"name": "Pengurusan Pengguna dan Peranan",
"level": 0,
"childs": [
{
"moduleId": 17,
"name": "Pengurusan Pengguna",
"level": 1,
"childs": [],
"links": []
},
{
"moduleId": 18,
"name": "Operasi Peranan",
"level": 1,
"childs": [],
"links": []
}
],
"links": [
{
"rel": "self",
"href": "http://103.8.160.34/mrf/modules/2"
}
]
}
];
我希望list.childs是表中具有list.name作为分组的行,我曾用ng-repeat来工作,但不起作用。我最能做的就是将其显示为td。我正在看的是
Perancangan(标头)
Perancangan Sektor
蓬古鲁桑·彭古纳·丹·佩拉南
这是the子
http://plnkr.co/edit/77t5id3WOmbl2GSqYKh2?p=preview
最佳答案
您似乎至少有两种方法可以完成此操作。第一个可能更简单,但是可以避免您提出的问题。将list []按摩成适合此表视图的扁平化简化数组。然后,您将对该数组执行ng-repeat。
但这确实是躲闪,并且完全避免了您的问题。对于您的问题,更直接的是,您可以尝试使用嵌套的ng-repeat,但是这些操作非常棘手。参见:http://vanderwijk.info/blog/nesting-ng-repeat-start/
最后,似乎最能解决您的意图和精神问题的方法是使用自定义过滤器。我写了一个example fiddle应该证明这个想法。
app.filter('flatten', function() {
// Because this filter is to be used for an ng-repeat the filter function
// must return a function which accepts an entire list and then returns
// a list of filtered items.
return function(listItems) {
var i,j;
var item, child;
var newItem;
var flatList = [];
// Begin a loop over the entire list of items provided by ng-repeat
for (i=0; i<listItems.length; i++) {
var item = listItems[i];
// Construct a new object which contains just the information needed
// to display the table in the desired way. This means we just extract
// the list item's name and level properties
newItem = {};
newItem.name = item.name.toUpperCase();
newItem.level = item.level;
// Push the level 0 item onto the flattened array
flatList.push(newItem);
// Now loop over the children. Note that this could be recursive
// but the example you provided only had children and no grandchildren
for (j=0; j<item.childs.length; j++) {
child = item.childs[j];
// Again create a new object for the child's data to display in
// the table. It also has just the name and level.
newItem = {};
newItem.name = child.name;
newItem.level = child.level;
flatList.push(newItem);
}
}
// Return the newly generated array that contains the data which ng-repeat
// will iterate over.
return flatList;
};
});
关于javascript - Ng-table ng-repeat嵌套值,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27263807/