Angularjs - Verwenden von orderby Filter im Bereich der Steuerung

Question

Ich habe eine Reihe von Objekten, d. H. Gefiltert und seitenweise und jetzt möchte ich die Listenelemente nach verschiedenen Objektattributen bestellen.

Ich versuchte, das orderBy Filter wie folgt:

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

Diese feine Arbeit zu sein scheint, auf dem Title Link klicken, alphabetisch die Zeile anordnet oder alphabetisch umgekehrt den aktuellen Zustand abhängig von.

Aber das Problem hier ist, dass nur die pagedItems bestellt werden, was Sinn macht, wie wir den orderBy Filter auf die pagedItems anwenden. Was ich erreichen möchte, ist es, den gesamten Satz von Gegenständen (nicht nur augenblicklich gesuchte Gegenstände) zu bestellen, wenn der Filter angewendet wird.

Um dies zu erreichen, dachte ich, ich würde eine Methode im Controller-Bereich verwenden. so änderte ich den oben:

/** 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'); 
}); 

Die sortItems Methode funktioniert und ändert die Reihenfolge, aber die Elemente in der Ansicht nicht aktualisiert, wie die $watch Code nicht ausgelöst wird. Ich nahm an, dass es vielleicht nicht geändert wird, weil die Daten in $scope.filtered nicht geändert werden und nur die Indizes geändert werden. So habe ich und leeres Element am Ende des Arrays:

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

Jetzt funktioniert alles wie erwartet, aber ich kann nicht ein leeres Objekt in dem Feld halten, wie es die Elemente betroffen ist, zählt und Daten angezeigt werden. Also dachte ich, ich würde einen leeren Gegenstand hinzufügen und entfernen. So änderte sich die oben:

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

aber erraten, was der $watch Code nicht wieder gefeuert.

Frage

Meine Frage ist nicht $watch Look für Änderungen in einem Array basiert auf ihrer Gesamtlänge? Wenn ja, was ist der bestmögliche Weg, um das zu erreichen, was ich versuche? Jede Hilfe wäre willkommen.

Answer 1

Ok löste ich diese unter Verwendung $broadcast und $on wie folgt:

$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'); 
})