Angularjs - sử dụng bộ lọc orderby trong phạm vi của bộ điều khiển

Question

Tôi có một loạt các đối tượng được lọc và phân trang và bây giờ tôi muốn sắp xếp các mục danh sách theo các thuộc tính đối tượng khác nhau.

Tôi đã thử các bộ lọc orderBy như sau:

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

Điều này dường như được làm việc tốt, nhấp vào liên kết Title, ra lệnh cho hàng theo thứ tự abc hoặc đảo ngược thứ tự abc tùy thuộc vào tình trạng hiện thời.

Nhưng vấn đề ở đây là chỉ có pagedItems đang được đặt hàng, có ý nghĩa khi chúng tôi đang áp dụng bộ lọc orderBy cho pagedItems. Những gì tôi muốn đạt được là đặt hàng toàn bộ các mặt hàng (không chỉ các mục hiện đang được phân trang) để được đặt hàng khi bộ lọc được áp dụng.

Để đạt được điều này, tôi nghĩ rằng tôi muốn sử dụng một phương pháp trong phạm vi điều khiển. vì vậy tôi đã thay đổi ở trên để:

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

Các sortItems công trình phương pháp và thay đổi thứ tự nhưng các mục trong giao diện không được cập nhật như mã $watch không bị sa thải. Tôi giả định rằng có thể nó không bị thay đổi vì dữ liệu trong $scope.filtered không bị thay đổi và chỉ các chỉ mục đang được thay đổi. Vì vậy, tôi đã thêm và bỏ trống phần tử ở cuối mảng:

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

Hiện tại, mọi thứ hoạt động như mong đợi nhưng tôi không thể giữ một đối tượng trống trong ảnh hưởng đến các mục, số lượng và dữ liệu được hiển thị. Vì vậy, tôi nghĩ tôi sẽ thêm và xóa một mục trống. Vì vậy, hãy thay đổi phần trên thành:

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

Nhưng hãy đoán mã số $watch không bị kích hoạt lại.

Câu hỏi

Câu hỏi của tôi là không $watch nhìn cho những thay đổi trong một mảng dựa trên chiều dài của nó? Nếu có, cách tốt nhất có thể để đạt được những gì tôi đang cố gắng. Bất kỳ trợ giúp sẽ được đánh giá cao.

Answer 1

Ok tôi giải quyết này bằng cách sử dụng $broadcast và $on như sau:

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