AngularJs 정렬 순서가 제대로 작동하지 않습니다.

Question

제 코드에 무슨 문제가 있는지 말해주세요. 표제 표제를 클릭하면 $ scope.sort가 올바른 값을 얻고 있지만 표가 사전 순으로 정렬되지 않습니다.

당신은 JSON 여기 파일 plunkr을 볼 수 있습니다

: 당신이 ngClick를 DOM의 onclick 이벤트를 사용하지 때문에 콘솔 로그 http://embed.plnkr.co/DYwbqDzBVTkQalhDtc6i/

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

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

 
\t \t 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; 
 
     }; 
 

 
\t }]) 
 
\t .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> 
 

 

 

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

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

 

 
\t </div>

Answer 1

을 보려면 여기를 클릭하십시오 http://plnkr.co/edit/DYwbqDzBVTkQalhDtc6i?p=preview

보기 지시문, 각도는 사용자 상호 작용을 감지하지 않습니다.

당신은 $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"