在angularjs中以2d数组排序

时间:2015-06-05 21:51:18

标签: angularjs

有一个对象数组,每个对象还包含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>

2 个答案:

答案 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>