AngularJs 排序方式无法正常工作

Question

请告诉我我的代码有什么问题。当您单击 table 标题时，$scope.sort 会获得正确的值，但不会按字母顺序对 table 进行排序。

您可以在此处使用 JSON 文件查看 plunkr：http://plnkr.co/edit/DYwbqDzBVTkQalhDtc6i?p=preview

查看此处查看控制台日志http://embed.plnkr.co/DYwbqDzBVTkQalhDtc6i/

var ssgaApp = angular.module('ssgaApp', []);

 ssgaApp.controller('mainCtrl',['$scope', '$http', function ($scope,$http) {
  var getEntries = $http.get('altLoginServlet.json');

  getEntries.success(function (data, status, headers, config) {
            $scope.ajaxerror = false;
            $scope.companies = data.data;
        });

        getEntries.error(function(data, status, headers, config) {
            $scope.ajaxerror = true;
        });


        $scope.sort  = {column: '', descending: true};
        $scope.changeSort = function(column) {
            // console.log($scope.sort);
            
            $scope.sort.column = column;
            $scope.sort.descending = !$scope.sort.descending;
            console.log('$scope.sort.column', $scope.sort.column, '$scope.sort.descending', $scope.sort.descending);

            $scope.currentPage = 1;
            $scope.currentPage_grid = 1;
        };

 }])
 .directive('changeSortdirective', ['$timeout', function($timeout) {

        return {
            restrict: 'A',
            scope: {
                changeSortAttr: '@changeSortdirective'
            },
            link: function (scope, element, attrs) {

                console.log('changeSortAttr', scope.changeSortAttr);

                element.on('click', function(){
                    console.log('changeSort bind', scope.changeSortAttr);

                    scope.$parent.changeSort(scope.changeSortAttr);

                });

            }
        };

    }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>



 <div ng-app="ssgaApp" ng-controller="mainCtrl">
  

  <table class="leftPadding">
           
           <thead>
               <tr>
                   <th width="80%">
                    <a href="javascript:void(0)" change-sortdirective="companyName">Name <span></span></a>
                    </th>
                   <th>
                    <a href="javascript:void(0)" change-sortdirective="id">ID <span></span></a>
                    </th>
               </tr>
           </thead>
           
           <tbody>
               <tr ng-repeat="comp in companies | orderBy:sort.column:sort.descending ">
                   <td class="col1" ng-show="comp.companyName"><a href="javascript:void(0)" ng-click='toggleModal(comp.id)'>{{comp.companyName}}</a></td>
                   <td class="col1" ng-show="comp.loginName">
                    <a ng-click="doAltLogin(comp.loginName)" href="javascript:void(0)">{{comp.lastName}}, {{comp.firstName}}</a></td>
                   <td ng-bind="comp.id"></td>
               </tr>
           </tbody>
           
       </table>


 </div>

Answer 1

因为您使用 DOM 的 onclick 事件而不是 ngClick 指令，所以 Angular 不会检测用户的交互。

您可能需要手动刷新 $scope：

      element.on('click', function() {
        scope.$apply(function() {
          scope.$parent.changeSort(scope.changeSortAttr);
        });
      });

Answer 2

Very simple use 

  $scope.$apply(function() {
          $scope.sort=angular.copy($scope.sort);
           });

Plunker="http://plnkr.co/edit/f5lAp33c8VSwnVwDVLhA?p=preview"

AngularJs 排序方式无法正常工作

AngularJs Sort orderBy not working properly

angularjs

sorting

angularjs-orderby