javascript - 使用AngularJS的OrderBy循环列表进行按索引升序排序的导航

Question

嗨，我如何命令 ng-repeat 将对象数组按照索引键升序排列为特定顺序。

$scope.paneContainer = {books:[{}] } ;  
$scope.paneContainer.books[0].science = { title:"science", content:"web/app/views/partials/science.html"  };
$scope.paneContainer.books[0].alphabets = { title:"alphabets", content:"web/app/views/partials/alphabets.html"  };
$scope.paneContainer.books[0].folks = { title:"folks", content:"web/app/views/partials/folks .html" };

然后在前端:

<ul class="ui-tabs-nav">
    <li ng-repeat="tab in paneContainer.books[0] track by $index | orderBy:$index " class="">
        <strong>{{tab.title}}</strong></a>
    </li>
</ul>

期望的输出是:

科学

字母

各位

当前 Angular 按字母顺序对列表进行排序。

Answer 1

正如迈克所说，对象没有顺序。如果您出于某种原因不想将其更改为数组(这可能是最简单也是最好的选择)，您可以向该对象添加一个 displayOrder 属性，然后使用过滤器按 displayOrder 对其进行排序。

angular.module('app').filter('orderByDisplayOrder', function () {
    return function (obj) {
        var array = [];
        Object.keys(obj).forEach(function (key) {
            array.push(obj[key]);
        });
        array.sort(function (a, b) {
            return a.displayOrder - b.displayOrder;
        });
        return array;
    }
});

然后您可以使用该过滤器进行排序。

<ul class="ui-tabs-nav">
<li ng-repeat="tab in paneContainer.books[0] track by $index | orderByDisplayOrder" class="">
    <strong>{{tab.title}}</strong></a>
</li>