AngularJS – ng-repeat中的顺序不正确

发布时间：2020-12-17 10:21:31 所属栏目：安全来源：网络整理

导读：我在我的控制器中定义了这样的chaps： $scope.chaps = [{"id":"1","chap_no":"1","name":"chap 1"},{"id":"2","chap_no":"2","name":"chap 2"},... {"id":"14","chap_no":"14","name":"chap 14"},{"id":"15","chap_no":"15","name":"chap 15"}]; 在视图中,我

我在我的控制器中定义了这样的chaps：

$scope.chaps =  [{"id":"1","chap_no":"1","name":"chap 1"},{"id":"2","chap_no":"2","name":"chap 2"},...
                  {"id":"14","chap_no":"14","name":"chap 14"},{"id":"15","chap_no":"15","name":"chap 15"}];

在视图中,我有：

<li ng-repeat="ch in chaps | orderBy:'chap_no'">{{ch.name}}</li>

但是我收到了错误的订单(1次后10次,2次后20次,依此类推)

chap 1,chap 10,chap 11,chap 12,chap 13,chap 14,chap 15,chap 2,chap 3,...

这是plunkr：http://plnkr.co/edit/Pc84ooB6dp2zoHXeawYn?p=preview

任何人都可以告诉我这里我做错了什么

您的chap_no属性是一个字符串,因此它以字符串的形式排序.

您可以创建自定义过滤器,如：

app.filter('customSort',function(){
    function sort (a,b) {
        if (a > b) { return 1; }
        if (a < b) { return -1; }

        return 0;
    }

    return function(arrInput,prop) {
        var arr = arrInput.sort(function(a,b) {
            return sort(+a[prop],+b[prop]);
        });
        return arr;
    }
})

那么在你的html中你可以像这样使用过滤器：

<li ng-repeat="ch in chaps | customSort:'chap_no'" >{{ch.name}}</li>

示例：http://plnkr.co/edit/UWvinthK9r0zgRbHMCGd?p=preview

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!