假设有以下HTML代码,使用了嵌套的ng-repeat
来循环渲染一组数据:
{{ group.name }}
- {{ item }}
要按照嵌套的ng-repeat
排序,可以在控制器中对数据进行排序,然后在HTML中使用已排序的数据进行渲染。
首先,在控制器中对数据进行排序,可以使用Array.prototype.sort()
方法来实现。在这个例子中,我们假设要按照group.name
和item
进行排序,可以使用以下代码:
$scope.groups = [
{
name: 'Group 1',
items: ['Item 4', 'Item 2', 'Item 3']
},
{
name: 'Group 3',
items: ['Item 1', 'Item 6', 'Item 5']
},
{
name: 'Group 2',
items: ['Item 8', 'Item 7', 'Item 9']
}
];
$scope.groups.sort(function(a, b) {
// 按照 group.name 排序
if (a.name < b.name) {
return -1;
}
if (a.name > b.name) {
return 1;
}
// 如果 group.name 相同,则按照 item 排序
return a.items[0] - b.items[0];
});
然后,在HTML中使用已排序的数据进行渲染。只需要使用ng-repeat
循环渲染已排序的groups
数组即可:
{{ group.name }}
- {{ item }}
这样就可以按照嵌套的ng-repeat
排序来渲染数据了。