orderBy 不使用具有服务返回值的列

Question

我在数据中显示一些基本的个人信息并使用 orderBy 对行进行排序。一切正常，除了一列，该值实际上是从服务中检索的。在这种情况下，当我通过按第一列中的 header 对行进行排序时，所有列都会进行排序，但那个列除外。

我有一个fiddle来测试它，这是代码。

<div ng-controller="MyController as vm">
    <table>
        <thead>
            <tr>
                <th><a href="" ng-click="vm.order('no')">No</a></th>
                <th>Name</th>
                <th>Age</th>            
                <th>Id</th>
                <th>NameById</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="person in vm.results | orderBy:vm.predicate:vm.reverse track by $index">
                <td ng-bind="person.no"></td>
                <td ng-bind="person.name"></td>
                <td ng-bind="person.age"></td>
                <td ng-bind="person.id"></td>
                <td name-by-id pid="{{person.id}}"></td>
            </tr>           
        </tbody>
    </table>
</div>

(function() {

    angular

    .module("app",[])

    .controller('MyController', MyController)    
    .service('namesService', namesService)    
    .controller('NameByIdController', NameByIdController)
    .directive('nameById', nameById);

    NameByIdController.$inject = ['namesService'];    

    function namesService() {        
        names = {
            '1': 'John',
            '2': 'Mary',
            '3': 'Mike',
            '4': 'Adam',
            '5': 'Julie'
        };

         this.getName = getName;

        function getName(id) {
            return names[id];
        }
    }

    function MyController() {        
        var vm = this;    

        vm.predicate = 'no';
        vm.reverse = false;
        vm.order = order;

        vm.results = [
            { no: 1,    name: 'John',    age: 10,    id: '1' },
            { no: 2,    name: 'Mary',    age: 19,    id: '2' },
            { no: 3,    name: 'Mike',    age: 21,    id: '3' },
            { no: 4,    name: 'Adam',    age: 35,    id: '4' },
            { no: 5,    name: 'Julie',   age: 29,    id: '5' }
        ];

        function order(predicate) {
            vm.reverse = (vm.predicate === predicate) ? !vm.reverse : false;
            vm.predicate = predicate;
        }   
    }

    function nameById() {
        return {
            scope: {
                pid: '@'
            },
            controller: NameByIdController,
            controllerAs: 'vm',
            bindToController: true,
            template: '<div ng-bind="vm.serviceName"></div>'
        }
    }

    function NameByIdController(namesService) {        
        var vm = this;
        vm.serviceName = namesService.getName(vm.pid);
    }

})();

有谁知道为什么会这样以及如何解决？

Answer 1

您被 $index 明确跟踪。将您的 ng-repeat 指令更改为

"person in vm.results | orderBy:vm.predicate:vm.reverse"

orderBy 不使用具有服务返回值的列

orderBy not working with column with returned value from service

angularjs

angularjs-service

angularjs-filter