2013-12-17 6 views
8

私はオブジェクトの配列、つまりフィルターをかけられ、ページングされていますが、今は異なるオブジェクト属性でリスト項目を並べ替えたいと思います。次のようにAngularjs - コントローラーのスコープでorderbyフィルターを使用する

私はorderByフィルタを試してみました:

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

これはTitleリンクをクリックし、正常に動作しているようだ、アルファベット順に行を命令または現在の状態に応じてアルファベット順に逆転。

は、しかし、ここで問題がpagedItemsは、我々はpagedItemsorderByフィルタを適用しているとして、理にかなって、注文されていることです。私が達成したいのは、フィルタが適用されたときに注文されるアイテムのセット全体(現在ページされたアイテムだけではない)を注文することです。

これを達成するために、コントローラのスコープでメソッドを使用すると思いました。私はに上記の変更:

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

sortItems方法の作品や順序を変更しますが、$watchコードが発射されていないとして、ビュー内のアイテムが更新されません。 $scope.filteredのデータが変更されず、インデックスだけが変更されているため、変更されていない可能性があります。だから私は、配列の末尾に追加され、空の要素:

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

さて、予想通り、すべてが動作しますが、私はそれがアイテムに影響を与えるとして、配列内の空のオブジェクトを保持カウントしたデータが表示されていることができません。だから私は空のアイテムを追加して削除すると思った。そうするには、上記の変更:

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

しかし$watchコードが再び解雇されていないものを推測します。

私の質問がある

質問は、それの長さに基づいて、配列の変化のための$watchを見ていますか?はいの場合は、私がしようとしていることを達成するための最良の方法は何ですか。どんな助けもありがとう。

答えて

5

次のように私は$broadcast$onを使用して、これを解くOK:

$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'); 
}) 
関連する問題