0

我Json包含两个objects:file和folder.

它sort基于两者共有的 created、ip 或 status 属性objects。为了sort我使用Orderby filter它，一旦我点击了相应的标题（每个标题代表一个不同的object's属性），它就会被激活。

我的代码 - Plunker

HTML

  <body ng-controller='VotesCtrl'>
    <div>
    <ul>
        <li class="check" ng-click=>
           <input type="checkbox" ng-model="master"></input>
        </li>
        <li class="created">
            <a href="#" ng-click="predicate = 'created'; reverse=!reverse">CREATED</a>
        </li>
        <li class="ip">
            <a href="#" ng-click="predicate = 'ip'; reverse=!reverse">IP ADDRESS</a>
        </li>
        <li class="status">
            <a href="#" ng-click="predicate = 'status'; reverse=!reverse">STATUS</a>
        </li>
    </ul>
    <ul ng-repeat="vote in votes | orderBy:predicate:reverse">
        <li ng-show="vote.folder" class="check">
          <input type="checkbox" ng-model="vote.cb"></input>
        </li>
        <li ng-show="vote.folder" class="created">
            {{vote.folder.created|date}}
        </li>
        <li ng-show="vote.folder" class="ip">
            {{vote.folder.ip}}
        </li>
        <li ng-show="vote.folder" class="status">
            {{vote.folder.status}}
        </li>
        <li ng-show="vote.file" class="check">
          <input type="checkbox" ng-model="vote.cb"></input>
        </li>
        <li ng-show="vote.file" class="created">
            {{vote.file.created|date}}
        </li>
        <li ng-show="vote.file" class="ip">
            {{vote.file.ip}}
        </li>
        <li ng-show="vote.file" class="status">
            {{vote.file.status}}
        </li>
    </ul>
   </div>
  </body>

代码：

var webApp = angular.module('webApp', []);

//controllers
webApp.controller ('VotesCtrl', function ($scope, Votes) {
    $scope.votes  = Votes;

    $scope.statuses = ["Approved","Pending","Trash","Spam"];

    $scope.expand = function(vote) {
       console.log("show");
       $scope.vote = vote;
       $scope.ip = vote.ip;
       $scope.date = vote.created;

    };

    $scope.$watch('master', function(newVal, oldVal) {
      angular.forEach($scope.votes, function(vote) {
        vote.cb = newVal;
      });
    });

    $scope.change = function() {
      for(var i = 0; i < $scope.votes.length; i++) {
        if($scope.votes[i].cb) {
            $scope.votes[i].status = $scope.votes.status;
            $scope.votes[i].cb = false;
            $scope.master = false;
        }
          $scope.show = false;
      }
    };

});

//services
webApp.factory('Votes', [function() {

    //temporary repository till integration with DB this will be translated into restful get query
    var votes = [
        {
          folder: {
            id: 1,
            created: 1381583344653,
            updated: 1381583344653,
            ratingID: 4,
            rate: 5,
            ip: '198.168.0.0',
            status: 'APPROVED'
          }  
        },
        {
            file: {
                id: 111,
                created: 1381583344653,
                updated: 1381583344653,
                ratingID: 4,
                rate: 5,
                ip: '198.168.0.1',
                status: 'APPROVED'
            }
        },
        {
            file: {
                id: 2,
                created: 1382387322693,
                updated: 1381583344653,
                ratingID: 3,
                rate: 1,
                ip: '198.168.0.2',
                status: 'APPROVED'
            }
        },
        {
            file: {
                id: 22,
                created: 1382387322693,
                updated: 1382387322693,
                ratingID: 3,
                rate: 1,
                ip: '198.168.0.3',
                status: 'APPROVED'
            }
        },
        {
            ratingID: 3,
            file: {
                id: 222,
                created: 1382387327693,
                updated: 1382387327693,
                ratingID: 3,
                rate: 1,
                ip: '198.168.0.4',
                status: 'APPROVED'
            }
        },
        {
            ratingID: 2,
            file: {
                id: 3,
                created: 1383584342663,
                updated: 1383584342663,
                ratingID: 2,
                rate: 5,
                ip: '198.168.0.5',
                status: 'APPROVED'
            }
        },
        {
            ratingID: 2,
            file: {
            id: 4,
            created: 1384584432742,
            updated: 1384584432742,
            ratingID: 2,
            rate: 5,
            ip: '198.168.0.6',
            status: 'SPAM'
            }
        },
        {
          folder: {
            id: 44,
            created: 1384584532742,
            updated: 1384584532742,
            ratingID: 2,
            rate: 5,
            ip: '198.168.0.7',
            status: 'APPROVED'
          }
        },
        {
            ratingID:  2,
            file: {
                id: 444,
                created: 1384984232742,
                updated: 1384984232742,
                ratingID: 2,
                rate: 5,
                ip: '198.168.0.8',
                status: 'APPROVED'
            }
        },
        {
            ratingID: 1,
            file: {
                id: 5,
                created: 1385524346643,
                updated: 1385524346643,
                ratingID: 1,
                rate: 1,
                ip: '198.168.0.9',
                status: 'SPAM'
            }
        },
        {
            ratingID: 1,
            file: {
                id: 6,
                created: 1386585332621,
                updated: 1386585332621,
                ratingID: 1,
                rate: 1,
                ip: '198.168.0.10',
                status: 'APPROVED'
            }
        }
    ];
    return votes;
}]);

无法在sort上正常工作list，并且我正在使用哪个属性并不重要sort。

4

1 回答 1

0

一个技巧是使用函数谓词，如文档所示：

$scope.getter = function(x) {
  if( x.file ) return x.file[$scope.predicate];
  else if( x.folder ) return x.folder[$scope.predicate];
  else return null;
};

然后在 HTML 中：

<ul ng-repeat="vote in votes | orderBy:getter:reverse">

请参阅分叉的 plunk：http ://plnkr.co/edit/sxKSegy9PgladAT8xu6I?p=preview

于 2013-10-08T12:14:05.977 回答