113

ユーザーが選択したオプションに応じて特定の数を表示する一連のタイルがあります。表示されている数字による並べ替えを実装したいと思います。

以下のコードは、私がそれをどのように実装したかを示しています (親カードスコープで値を取得/設定することにより)。ここで、orderBy 関数は文字列を受け取るため、curOptionValue というカード スコープに変数を設定して、それで並べ替えようとしましたが、うまくいかないようです。

質問は、カスタムソート関数を作成するにはどうすればよいですか?

<div ng-controller="aggViewport" >
<div class="btn-group" >
    <button ng-click="setOption(opt.name)" ng-repeat="opt in optList" class="btn active">{{opt.name}}</button>
</div>
<div id="container" iso-grid width="500px" height="500px">
    <div ng-repeat="card in cards" class="item {{card.class}}" ng-controller="aggCardController">
        <table width="100%">
            <tr>
                <td align="center">
                    <h4>{{card.name}}</h4>
                </td>
            </tr>
            <tr>
                <td align="center"><h2>{{getOption()}}</h2></td>
            </tr>
        </table>        
    </div>
</div>

およびコントローラー：

module.controller('aggViewport',['$scope','$location',function($scope,$location) {
    $scope.cards = [
        {name: card1, values: {opt1: 9, opt2: 10}},
        {name: card1, values: {opt1: 9, opt2: 10}}
    ];

    $scope.option = "opt1";

    $scope.setOption = function(val){
        $scope.option = val;
    }

}]);

module.controller('aggCardController',['$scope',function($scope){
    $scope.getOption = function(){
        return $scope.card.values[$scope.option];
    }
}]);
4

4 に答える 4

192

実際、orderByフィルターは文字列だけでなく関数もパラメーターとして取ることができます。orderByドキュメントから: https://docs.angularjs.org/api/ng/filter/orderBy ):

関数: ゲッター関数。この関数の結果は、<、=、> 演算子を使用して並べ替えられます。

したがって、独自の関数を作成できます。たとえば、opt1 と opt2 の合計に基づいてカードを比較したい場合 (私はこれを作っています。要点は、任意の関数を使用できるということです)、コントローラーに次のように記述します。

$scope.myValueFunction = function(card) {
   return card.values.opt1 + card.values.opt2;
};

そして、あなたのテンプレートで：

ng-repeat="card in cards | orderBy:myValueFunction"

これが動作中のjsFiddleです

注目すべきもう1 つの点は、これはAngularJS フィルターorderByの一例にすぎないため、非常に具体的な順序付け動作が必要な場合は、独自のフィルターを作成できることです (ただし、ほとんどのユース ケースでは十分なはずです)。orderBy

于 2012-08-20T16:45:03.190 に答える
0

orderBy 関数とともに方向を含めるには:

ng-repeat="card in cards | orderBy:myOrderbyFunction():defaultSortDirection"

どこ

defaultSortDirection = 0; // 0 = Ascending, 1 = Descending
于 2018-10-22T22:36:19.340 に答える