私はオブジェクトの配列、つまりフィルターをかけられ、ページングされていますが、今は異なるオブジェクト属性でリスト項目を並べ替えたいと思います。次のように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
は、我々はpagedItems
へorderBy
フィルタを適用しているとして、理にかなって、注文されていることです。私が達成したいのは、フィルタが適用されたときに注文されるアイテムのセット全体(現在ページされたアイテムだけではない)を注文することです。
これを達成するために、コントローラのスコープでメソッドを使用すると思いました。私はに上記の変更:
/** 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
を見ていますか?はいの場合は、私がしようとしていることを達成するための最良の方法は何ですか。どんな助けもありがとう。