Question

以下用于对表列进行排序的代码不起作用。我收到一条错误消息：

错误：$ injector：unpr   未知提供商

未知提供者：orderbyFilterProvider＆lt; -

查看：

<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th><a href="" ng-click="reverse=!reverse;order('lname', reverse)">Lastname</a></th>
      <th><a href="" ng-click="reverse=!reverse;order('fname', reverse)">Firstname</a></th>
      <th><a href="" ng-click="reverse=!reverse;order('maxAge', reverse)">Age</a></th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in filteredItems = (nameslist | orderBy:predicate)">
      <td>{{ item.lname }}</td>
      <td>{{ item.fname }}</td>
      <td>{{ item.maxAge }}</td>
    </tr>
  </tbody>
</table>

控制：

//Get request to REST API
$scope.nameslist = resService.getAll();

//sort function
var orderby = $filter('orderby');

$scope.order = function (predicate, reverse) {
   $scope.nameslist = orderby($scope.nameslist, predicate, reverse);
};

/* default */
$scope.order('-maxAge', false);

resService：

...
return {
   getAll: function () {
      return requestService.name.query();
   },
...
}

我怎样才能修改排序功能？

Answer 1

这是我试过的

更新了html。

<body ng-controller="testCtrl">

    <table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th><a href="" ng-click="reverse=!reverse;predicate = 'lname'">Lastname</a></th>
      <th><a href="" ng-click="reverse=!reverse;predicate = 'fname'">Firstname</a></th>
      <th><a href="" ng-click="reverse=!reverse;predicate = 'maxAge '">Age</a></th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in nameslist | orderBy:predicate:reverse">
      <td>{{ item.lname }}</td>
      <td>{{ item.fname }}</td>
      <td>{{ item.maxAge }}</td>
    </tr>
  </tbody>
</table>
</body>



app.controller("testCtrl",['$scope','$filter',function($scope,$filter){
        $scope.nameslist = [{maxAge :112,fname:'first1' ,MiddleName: 'middle1',lname:'last1'},
      {maxAge :15,fname:'first2' ,MiddleName: 'middle1',lname:'last1'},
      {maxAge :11,fname:'first3' ,MiddleName: 'middle2',lname:'last2'},
      {maxAge :14,fname:'first4' ,MiddleName: 'middle3',lname:'last1'}
      ];

无需自定义过滤器。

以下是Plunker

Answer 2

你可以使用angular的内置orderBy过滤器，就像反转一样：

<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th><a href="" ng-click="order('lname')">Lastname</a></th>
      <th><a href="" ng-click="order('fname')">Firstname</a></th>
      <th><a href="" ng-click="order('maxAge')">Age</a></th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in (nameslist | orderBy:predicate:reverse)">
      <td>{{ item.lname }}</td>
      <td>{{ item.fname }}</td>
      <td>{{ item.maxAge }}</td>
    </tr>
  </tbody>
</table>

以下订单功能：

$scope.nameslist = [{maxAge :112,fname:'Amy' ,MiddleName: 'Sue',lname:'Test'},
  {maxAge :15,fname:'Chris' ,MiddleName: 'Deb',lname:'Something'},
  {maxAge :11,fname:'Sue' ,MiddleName: 'Amy',lname:'Abcd'},
  {maxAge :14,fname:'Debby' ,MiddleName: 'Chris',lname:'Try'}
  ];

//sort function
//var orderby = $filter('orderby');
// initializing the filter 
// if you don't want a default filter, you could initialize them to empty
$scope.predicate = 'lname'; 
$scope.reverse = false;

$scope.order = function (filterBy) {
   // if same filter is clicked again, and its not reverse then reverse
   // else just apply the filter
   if ($scope.predicate === filterBy) {
       $scope.reverse = !$scope.reverse;
   } else {
       $scope.reverse = false;
   }
    $scope.predicate = filterBy;
};

它背后的逻辑是向orderBy发送一个真实的附加参数会反转它，所以我们只是用它来反转。

你的错误也可能是因为这行：

<tr ng-repeat="item in filteredItems = (nameslist | orderBy:predicate)">

应该是：

<tr ng-repeat="item in (nameslist | orderBy:predicate:reverse)">

以下是适用的插件：

http://plnkr.co/edit/JSoyoCkBwknlAggEwU59?p=preview

在AngularJS中对表列进行排序

2 个答案: