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

带参数的AngularJS动态排序函数

angularjs-orderby angularjs javascript

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

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>

有关详细信息,请参阅

AngularJS orderBy Filter API Reference