Сортировка столбцов таблицы в AngularJS

Question

Сортировка столбцов таблицы в AngularJS

0

Следующий код для сортировки столбцов таблицы не работает. Я получаю сообщение об ошибке:

Ошибка: $ injector: unpr Неизвестный поставщик

Неизвестный поставщик: orderbyFilterProvider <-

Посмотреть:

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

Ctrl:

//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();
   },
...
}

Как я могу изменить функцию сортировки?

yuro 26 июнь 2015, в 16:00

Источник

Теги:

javascript

angularjs

angularjs-filter

angularjs-scope

angular-filters

2 ответа

Ещё вопросы

RIYAJ KHAN · Answer 1 · 2015-06-26T12-37-00.000Z

Вот что я пробовал

Обновлен 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'}
      ];

Нет необходимости настраивать фильтр.

Вот Плункер

Я думаю, что для больших приложений мне нужно использовать фильтр.
Я думаю, что у вас есть заказ на месте. Я ошибался, полагая, что могу передать два аргумента как одну переменную области видимости. Спасибо!
со слишком сложными условиями в фильтре вы должны использовать пользовательский фильтр.

Arathi Sreekumar · Answer 2 · 2015-06-26T10-55-00.000Z

Вы можете использовать угловой встроенный фильтр 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;
};

Логика этого заключается в том, что отправка дополнительного параметра true в 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

Это не правильно. Я получаю ту же ошибку при попытке <tr ng-repeat="item in (nameslist | orderBy:predicate)">
Я добавил рабочий код с моим кодом. Возможно ли, что сам ваш результат не отображается?