如何使用AngularJS更改列表项的顺序?

时间:2017-11-25 18:00:00

标签: angularjs

我正在尝试根据他们的ID订购一些李。

目前我有:

<ul bx-slider="" id="rotator" style="width: auto; position: relative;">

    <li class="promo-banner ng-scope" ng-repeat="feature in events | limitTo:2" 
          bx-slider-item="" ordering="" id="ORDER-ROTATOR2"
          style="float: none; list-style: none; position: absolute; width: 1510px; z-index: 50; display: block;">
    </li>

    <li class="promo-banner ng-scope" ng-repeat="feature in events | limitTo:2"
        bx-slider-item="" id="ORDER-ROTATOR1" ordering=""
        style="float: none; list-style: none; position: absolute; width: 1510px; z-index: 0; display: none;">
    </li>

</ul>

我的指示是:<​​/ p>

.directive('ordering', function () {

    var linker2 = function (scope, element, attrs) {

        var elem = angular.element('#rotator').find('li').sort(sortMe);
        console.log(elem);
        angular.element('#rotator').append(elem);

        function sortMe(a, b) {
            return a.id < b.id;
        }

    };

    return {
        link: linker2
    }
})

它看起来像是排序而不是它们的ID。

有什么想法吗?

1 个答案:

答案 0 :(得分:0)

您可以使用带有angularjs的orderby过滤器

要有多个参数,

 <li class="promo-banner ng-scope" ng-repeat="feature in events | limitTo:2 | orderBy:['className','id']" bx-slider-item="" ordering="" id="ORDER-ROTATOR2" style="float: none; list-style: none; position: absolute; width: 1510px; z-index: 50; display: block;"></li>