How to sort the grid data based on drop down selection in angular js

Question

I have grid display in html and above the grid I have drop down list. I have to sort the data of the grid view dynamically based on drop down list selected item. In grid one of filed is invisible.

Here is my working plunker:

http://plnkr.co/edit/1iJ7HVcv4CyMzNKUXHTi?p=preview

index.html

<!DOCTYPE html>
<html ng-app="myApp">
    <head lang="en">
        <meta charset="utf-8">
        <title>Custom Plunker</title>  
        <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
        <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body ng-controller="MyCtrl">

    <br><br>
    <span  class=""><br/>
                    <select ng-model="name" ng-options="name.name for name in names">
                      <option value="">---- SELECT ----</option>
                    </select>
                 </span><br/>
        <div class="gridStyle" ng-grid="gridOptions"></div>
    </body>
</html>

main.js

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {

  $scope.names = [
                               {name:' NAME A – Z ', shade:'dark'},
                               {name:' NAME Z – A ', shade:'light'},
                               {name:' ID LOW TO HIGH', shade:'dark'},
                               {name:' ID HIGH TO LOW', shade:'dark'}


                            ];





    $scope.myData = [{name: "Moroni", age: 50,id:1},
                     {name: "Tiancum", age: 43,id:2},
                     {name: "Jacob", age: 27,id:3},
                     {name: "Nephi", age: 29,id:4},
                     {name: "Enos", age: 34,id:5}];




    $scope.gridOptions = { data: 'myData' ,
                   columnDefs: [
            {field: 'name', displayName: 'Name'},
            {field:'age', displayName:'Age'},
            {field:'id', displayName:'Id', visible:false}
        ] 
    };
});

I would suggest clicking on the grid header to do all those sorting functions. It is there by default.... Click on 'Name' to sort it either in Ascending or Descending Order. — Alagarasan M
– Alagarasan M, Commented Aug 8, 2014 at 14:33
@AlaguMS it is mandatory for drop down ,that to the id is not displayed in grid but it has in drop down by selecting the drop down i have to sort the grid . — user3812457
– user3812457, Commented Aug 8, 2014 at 14:37
with out answer the question need not to down vote the question . — user3812457
– user3812457, Commented Aug 8, 2014 at 14:39
A detail blog: sforsuresh.in/angularjs-ng-repeat-sorting-data-using-dropdown — Suresh Kamrushi
– Suresh Kamrushi, Commented Mar 3, 2016 at 13:19

lbrazier · Accepted Answer · 2014-08-08 14:52:55Z

2

You can do it like this:

Add an ng-change to your select:

<select ng-change="sort()" ng-model="name" ng-options="name.name for name in names">

Add some information to your model about what your select options mean:

 $scope.names = [
                           {name:' NAME A – Z ', shade:'dark', col: 'name', dir: 'asc'},
                           {name:' NAME Z – A ', shade:'light', col: 'name', dir: 'desc'},
                           {name:' ID LOW TO HIGH', shade:'dark', col: 'id', dir: 'asc'},
                           {name:' ID HIGH TO LOW', shade:'dark', col: 'id', dir: 'desc'}


                        ];

And tell ng-grid what it is supposed to do:

    $scope.sort = function(){
  $scope.gridOptions.sortInfo = {fields:[$scope.name.col],directions:[$scope.name.dir]};
  $scope.gridOptions.sortBy($scope.name.col);

}

Updated plunker:

http://plnkr.co/edit/yP4nK6wgmD3picuz3ZIf?p=preview

answered Aug 8, 2014 at 14:52

lbrazier

2,6541 gold badge27 silver badges22 bronze badges

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

2 Comments

user3812457 Over a year ago

@Imyers thank you ,you got my requirement and guided proper answer ,but where as some one not got the hidden id concept and down voted the question .

user3812457 Over a year ago

@Imyers could you please answer the question:[stackoverflow.com/questions/25604384/…

Collectives™ on Stack Overflow

How to sort the grid data based on drop down selection in angular js

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related