AngularJs Sort orderBy not working properly

Question

Please tell me whats wrong in my code. When you click on table headings $scope.sort is getting correct values, but its not sorting the table alphabetically.

You can view the plunkr here with JSON file: http://plnkr.co/edit/DYwbqDzBVTkQalhDtc6i?p=preview

View here to see CONSOLE LOG 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>

ngasull · Accepted Answer · 2015-01-13 11:07:51Z

2

Because you use DOM's onclick event and not ngClick directive, Angular doesn't detect user's interactions.

You may need to refresh the $scope manually:

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

answered Jan 13, 2015 at 11:07

ngasull

4,2161 gold badge24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

STEEL Over a year ago

thanks for explanation ;) I replace the event listen line only now with angular.element.bind('click', function(){

squiroid · Accepted Answer · 2015-01-13 11:08:16Z

1

Very simple use 

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

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

answered Jan 13, 2015 at 11:08

squiroid

14.1k7 gold badges50 silver badges68 bronze badges

2 Comments

STEEL Over a year ago

Thanks it works. But can you be explain why we need to use $apply

squiroid Over a year ago

You are working outside the scope of angular js "onclick" is not the part of angular.So anything you change in the scope will not reflect in the angular working. $apply start the digest cycle of angular as provided in docs "docs.angularjs.org/guide/scope/…"

Collectives™ on Stack Overflow

AngularJs Sort orderBy not working properly

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related