代码之家  ›  专栏  ›  技术社区  ›  CMartins

带参数的AngularJS动态排序函数

  •  0
  • CMartins  · 技术社区  · 6 年前

    Dynamic orderBy in AngularJS 我尝试用参数实现一个动态排序函数。它不能正常工作,因为正在调用默认排序。如何使它不调用默认的按名称排序?

    我有两个按钮来调用函数和发送参数。

    <button ng-click="dynamicOrder('f9.id')" class="btn">Sort by rating</button>            
    <button ng-click="dynamicOrder('name')" class="btn">Sort alphabetic</button>
    

    <li ng-repeat="item in cumulus.items | orderBy: dynamicOrder()"
        ng-show="cumulus.items.length > 0" class="block-grid-item">
        <p>
            <a target="_blank" href="{{ item.image }}">
                <img class="img-responsive" src="{{ item.thumb }}">
            </a>
        </p>
        <p style="overflow: hidden;">{{ item.name }}</p>                    
        <p class="text-primary"><input type="hidden" value="{{ item.f9.id }}" /> {{ item.f9.displaystring }}</p>
    </li>
    

    以及我的秩序功能

    $scope.dynamicOrder = function (sortParam) {
        if (!sortParam) {            
            return 'name';
        } else {
            console.log("sortParam: ", typeof (sortParam), sortParam);
            return sortParam;
        }  
    };
    
    0 回复  |  直到 6 年前
        1
  •  1
  •   georgeawg    6 年前

    这个 orderBy 表达式可以是getter函数。此函数将以每个项目作为参数调用,返回值将用于排序。

    $scope.getterFn = function(item) {
        if ($scope.dynamicOrder == 'f9.id') {
            return item.f9.id;
        } else if ($scope.dynamicOrder == 'name') {
            return item.name;
        } else {
            return item;
        }
    };
    

    用法:

    <button ng-click="dynamicOrder = 'f9.id'" class="btn">Sort by rating</button>
    <button ng-click="dynamicOrder = 'name'" class="btn">Sort alphabetic</button>
    
    <li ng-repeat="item in cumulus.items | orderBy: getterFn">
    
        <!-- ... -->
    
    </li>   
    

    有关详细信息,请参阅