orderBy не работает с разбивкой на страницы и фильтрами

Question

<table> 
<thead> 
    <tr> 
     <th class="col-md-3" ng-click="sortDirection = !sortDirection">Created At</th> 
    </tr> 
</thead> 
<tbody> 
    <tr dir-paginate="food in foods | filter:foodFilter | itemsPerPage:pageSize | orderBy:'created_at_date'"> 
     <td class="col-md-"> {{food.created_at_date}} </td> 
</tbody> 
</table> 

<dir-pagination-controls 
    max-size= 7 
    boundary-links="true"> 
</dir-pagination-controls> 

Это всего лишь фрагмент кода, но его слишком большой, чтобы мириться. Все работает, но только некоторые из created_at_date в порядке. Когда я нажимаю на другой фильтр для добавления или удаления данных в зависимости от этого фильтра, только некоторые из них вводятся в нужное место. Мой главный вопрос: есть ли способ правильно отсортировать все даты, сохраняя при этом все остальное? Вся помощь приветствуется, спасибо

(function() { 
"use strict"; 

App.controller('foodsController', ['$scope'], 
    function($scope) { 
     $scope.sortDirection = true; 

Answer 1

В вашем контроллере вы можете добавить метод для заказа массива до того, как вы его закроете.

Предполагая, что ваши продукты, массив имеет массив объектов, каждый с ключом created_at_date и значением:

App.controller('foodsController', function($scope) { 

    $scope.foods = [{ 
    created_at_date: 6791234 
    }, { 
    created_at_date: 9837245 
    }, { 
    created_at_date: 1234755 
    }]; 

    // create a method exposed to the scope for your template. 

    $scope.orderBy = function(key, array) { 
    // now you've received the array, you can sort it on the key in question. 
    var sorted = array.sort(function(a, b) { 
     return a[key] - b[key]; 
    }); 
    return sorted; 
    } 

}); 

Теперь на шаблоне, у вас есть доступный метод для сортировки значения для вас:

<table> 
    <thead> 
     <tr> 
      <th class="col-md-3" ng-click="sortDirection = !sortDirection">Created At</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr dir-paginate="food in orderBy('created_at_date', foods) | filter:foodFilter | itemsPerPage:pageSize"> 
      <td class="col-md-"> {{food.created_at_date}} </td> 
     </tr> 
    </tbody> 
</table> 

Метод orderBy, который мы создали на вашем контроллере, возвращает массив, но он просто сортируется по клавише, который отправлен в качестве первого аргумента функции. Второй аргумент - это исходный массив, который вы пытаетесь отсортировать.

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