grid sorting in AngularJs

Question

I am very new to AngularJs. I got the data in table using ng-repeat. Now, i am trying to sort the table columns. It is not happening. Please give me the suggestion.

<html ng-app="authorsApp">
    <div ng-controller="myAuthors">
        <table class="table table-striped table-hover">
            <tr>
                <th ng-click="sort{'name'}">
                Name
                <span class="glyphicon glyphicon-sort" ng-show="sortKey == 'name'" ng-class="{'glyphicon-chevron-up':reverse, 'glyphicon-chevron-down':!reverse}"></span>
                </th>
                <th ng-click="sort{'department'}">
                Deparment
                <span class="glyphicon glyphicon-sort" ng-show="sortKey == 'department'" ng-class="{'glyphicon-chevron-up':reverse, 'glyphicon-chevron-down':!reverse}"></span>
                </th>
            </tr>
            <tr ng-repeat="auther in authors | filter: search | orderBy:sortKey:reverse">
                <td>{{auther.name}}</td>
                <td>{{auther.department}}</td>
            </tr>
        </table>
    </div>
    <script src="Scripts/angular.js"></script>
    <script src="Assets/js/authors-01.js"></script>
</html>

js file as below

var app = angular.module("authorsApp", []);

app.controller("myAuthors", function ($scope, $http) {
    $scope.authors = [];
    $http.get('Assets/js/authors-01.json').then(function (response) {
        $scope.authors = response.data;
    });

    $scope.sort = function (keyname) {
        $scope.sortKey = keyname;
        $scope.reverse = !$scope.reverse;
    }
});

json file as below

[
    {
        "name": "Manoj",
        "department": "Design"
    },
    {
        "name": "Srikant",
        "department": "Business"
    }
]

Thanks in advance.

A function call is made with parenthesis (...) not curly braces {...} so it should be sort('name') — tanmay
– tanmay, Commented Apr 7, 2017 at 9:06
@tanmya, insted of $scope.sort = function (keyname) { $scope.sortKey = keyname; $scope.reverse = !$scope.reverse; } should i use $scope.sort = function (keyname)( $scope.sortKey = keyname; $scope.reverse = !$scope.reverse; ) please current me. — Manoj
– Manoj, Commented Apr 7, 2017 at 9:08

Community · Accepted Answer · 2017-05-23 12:25:33Z

In the view, as set in the comments by @tanmay, you should call sort() instead of sort{}

Code example:

angular
  .module("authorsApp", [])
  .controller("myAuthors", function ($scope) {
    // Authors for code example...
    $scope.authors = [{"name": "Manoj","department": "Design"},{"name": "Srikant","department": "Business"}];
    
    $scope.sort = function (keyname) {
      $scope.sortKey = keyname;
      $scope.reverse = !$scope.reverse;
    }
  });

th { cursor: pointer; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
  crossorigin="anonymous">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="authorsApp" ng-controller="myAuthors">
  <table class="table table-striped table-hover">
    <tr>
      <th ng-click="sort('name')">
        Name
        <span class="glyphicon glyphicon-sort" ng-show="sortKey == 'name'" ng-class="{'glyphicon-chevron-up':reverse, 'glyphicon-chevron-down':!reverse}"></span>
      </th>
      <th ng-click="sort('department')">
        Deparment
        <span class="glyphicon glyphicon-sort" ng-show="sortKey == 'department'" ng-class="{'glyphicon-chevron-up':reverse, 'glyphicon-chevron-down':!reverse}"></span>
      </th>
    </tr>
    <tr ng-repeat="auther in authors | filter: search | orderBy:sortKey:reverse">
      <td>{{auther.name}}</td>
      <td>{{auther.department}}</td>
    </tr>
  </table>
</div>

Collectives™ on Stack Overflow

grid sorting in AngularJs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related