有一个对象数组,每个对象还包含angularJS中的另一个嵌套数组。通常有2-d数组,我想显示将由名为'tasks'的嵌套数组排序的数组值。
这是我的代码。 谢谢你提前......
var app = angular.module('app',[]).controller('ctrl1', function($scope){
$scope.record = [
{uniqueID : 'pp-12', Name : 'Jim', status : 'Approved', tasks : ['xx', 'er'] },
{uniqueID : 'pp-11', Name : 'Jim', status : 'Canceled', tasks : ['aa', 'vy','sd'] },
{uniqueID : 'pp-45', Name : 'Nick', status : 'Pending', tasks : ['av'] },
{uniqueID : 'pp-32', Name : 'Thomas', status : 'Canceled', tasks : ['zc', 'ym','at', 'lt'] },
{uniqueID : 'pp-01', Name : 'Thomas', status : 'Pending', tasks : ['xy', 'fr'] },
{uniqueID : 'pp-09', Name : 'Nick', status : 'Approved', tasks : ['aa', 'sd','cf'] },
{uniqueID : 'pp-23', Name : 'Lina', status : 'Requested', tasks : ['av', 'bs','ay','tr'] },
{uniqueID : 'pp-39', Name : 'Jim', status : 'Pending', tasks : ['zc'] }
];
});
<table border="1">
<thead>
<tr>
<td>Unique ID</td>
<td>Name</td>
<td>Status</td>
<td>tasks</td>
</tr>
</thead>
<tbody ng-repeat="data in record">
<tr ng-repeat="plan in data.tasks track by $index | orderBy : tasks" >
<td> {{data.uniqueID}}</td>
<td> {{data.Name}}</td>
<td> {{data.status}}</td>
<td> {{plan}}</td>
</tr>
</tbody>
</table>
答案 0 :(得分:1)
只能使用循环,创建一个新的排序数组,尝试:
.filter("recordFilter", function(){
return function(records){
var arr = [];
angular.forEach(records, function(record){
angular.forEach(record.tasks, function(plan){
arr.push(angular.extend({}, record, {plan:plan}))
})
});
return arr.sort(function(a,b){
return a.plan > b.plan ? 1 : -1
})
}
})
<tbody>
<tr ng-repeat="data in record | recordFilter track by $index">
<td> {{data.uniqueID}}</td>
<td> {{data.Name}}</td>
<td> {{data.status}}</td>
<td> {{data.plan}}</td>
</tr>
</tbody>
<强> Demo 强>
答案 1 :(得分:0)
嵌套的ng-repeat?
<table border="1">
<thead>
<tr>
<td>Unique ID</td>
<td>Name</td>
<td>Status</td>
<td>tasks</td>
</tr>
</thead>
<tbody ng-repeat="data in record">
<tr>
<td> {{data.uniqueID}}</td>
<td> {{data.Name}}</td>
<td> {{data.status}}</td>
<td> <span ng-repeat="plan in data.tasks"> {{plan}}</span></td>
</tr>
</tbody>
</table>