1

AngularJSorderByフィルターを使用して、ここに並べ替え可能なテーブルを作成しました。

http://plnkr.co/edit/AarOSuawXVYe9C5LBDOK?p=preview

クリック時に各テーブル ヘッダーに「reverse」の値を使用して、並べ替えの方向を決定しています。これは明らかな問題を引き起こしますが、別のテーブル ヘッダーをクリックすると、以前に別のテーブル ヘッダーから変更された可能性のある逆の値の反対に移動するだけです。

<th ng-click="predicate = 'character'; reverse=!reverse">alpha</th>
<th ng-click="predicate = 'num'; reverse=!reverse">num</th>
<th ng-click="predicate = 'dec'; reverse=!reverse">dec</th>
<th ng-click="predicate = 'value'; reverse=!reverse"></th>
<th ng-click="predicate = 'date'; reverse=!reverse">date</th>

orderBy フィルターを使用してテーブルの行にデータを入力する ng-repeat

<tr ng-repeat="line in infoCtrl.data | orderBy:predicate:reverse">

逆の範囲を分離したり、それぞれに個別の逆の値を与えるにはどうすればよいですか?

4

1 に答える 1

2

理想的には、ソートブール値を逆にする前に述語の現在の値を確認します。同じなら裏返す。それ以外の場合は、デフォルトにリセットします。

コントローラーにソート用の関数を用意します。

 $scope.predicate = "character";
 $scope.reverse = false    
 $scope.sort = function(p) {
     if ($scope.predicate == p) {
         $scope.reverse = !$scope.reverse;
     } else {
         $scope.predicate = p;  
         $scope.reverse = false;
     }
 }

html からこの関数を呼び出します。

    <th ng-click="sort('character')">alpha</th>
    <th ng-click="sort('num')">num</th>
    <th ng-click="sort('dec')">dec</th>
    <th ng-click="sort('value')"></th>
    <th ng-click="sort('date')">date</th>
于 2014-06-05T18:52:36.777 に答える