2013-12-17 17 views
8

Mam tablicę obiektów, tj. Filtrowaną i stronicowaną, a teraz chciałbym zamówić elementy listy według różnych atrybutów obiektów.Angularjs - użycie filtru porządkowego w zakresie kontrolera

próbowałem filtr orderBy następująco:

<th><a href='' ng-click="reverse = sortParam == 'title' && !reverse; sortParam = 'title'">Title</a></th> 

<tr ng-repeat="item in pagedItems|filter:filterParam|orderBy:sortParam:reverse"> 
    <td>{{ item.title }}</td> 
</tr> 

To wydaje się działać dobrze, klikając na link Title, nakazuje wiersz alfabetycznie lub alfabetycznie odwrotnej zależności od aktualnego stanu.

Ale problem polega na tym, że zamawiane są tylko pagedItems, co ma sens, gdy stosujemy filtr orderBy do pagedItems. Chcę tylko zamówić cały zestaw przedmiotów (nie tylko obecnie stronicowanych), które będą zamawiane po zastosowaniu filtra.

Aby to osiągnąć, pomyślałem, że użyłbym metody z zakresu kontrolera. Zmieniłem więc powyższe do:

/** In the Template */ 

<th><a href='' ng-click="sortItems('title')">Title</a></th> 

<tr ng-repeat="item in pagedItems|filter:filterParam"> 
    <td>{{ item.title }}</td> 
</tr> 


/** In the Controller */ 

$scope.sortItems = function(value) { 
    $scope.filtered = $filter('orderBy')($scope.filtered, value); 
}; 

$scope.$watch('currentPage + numPerPage + filtered', function() { 
    $scope.pagedItems = getPagedItems($scope, 'filtered'); 
}); 

The sortItems prac metody i zmienia kolejność, ale pozycje w widoku nie zostanie zaktualizowany kod $watch nie zostanie zwolniony. Zakładam, że być może nie zostanie to zmienione, ponieważ dane w $scope.filtered nie są zmieniane i tylko indeksy są zmieniane. Więc dodałem i pusty element na koniec tablicy:

$scope.sortItems = function(value) { 
    $scope.filtered = $filter('orderBy')($scope.filtered, value); 
    $scope.filtered.push({}); 
}; 

Teraz wszystko działa zgodnie z oczekiwaniami, ale nie mogę utrzymać pusty obiekt w tablicy, jak to wpływa na elementy, liczyć i wyświetlania danych. Więc pomyślałem, że dodam i usuniemy pusty przedmiot. Więc zmienił wyżej:

$scope.sortItems = function(value) { 
    $scope.filtered = $filter('orderBy')($scope.filtered, value); 
    $scope.filtered.push({}); 
    $scope.filtered.pop(); 
}; 

Ale zgadnijcie co nie kod $watch czym ponownie zwolniony.

Pytanie

Moje pytanie jest nie $watch wygląd zmian w tablicy oparta na jego długość? Jeśli tak, jaki jest najlepszy sposób, aby osiągnąć to, co próbuję. Każda pomoc będzie doceniona.

Odpowiedz

5

Ok rozwiązano to stosowanie $broadcast i $on następująco:

$scope.sortList = function(value) { 

    if (value === $scope.currentFilter) { 
     value = value.indexOf('-') === 0 ? value.replace("-","") : "-" + value; 
    } 

    $scope.currentFilter = value; 
    $scope.filtered = $filter('orderBy')($scope.filtered, value); 
    $scope.$broadcast('sorted'); 
} 

$scope.$on('sorted', function() { 
    $scope.pagedCandidates = getPagedItems($scope, 'filtered'); 
})