We can easily implement sorting functionality in a table as shown below.
Edit in plunker- On ng-click we need to perform sort operation on the selected column
- We need to use ng-show to show the image
- We need to specify the order by in ng-repeat directive
- Need a java script function for reverse as shown below
<!DOCTYPE html> <html ng-app="myApp"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <meta charset="utf-8" /> </head> <body > <div class="container" ng-controller="userCtrl"> <h2>Angular sorting</h2> <div class="row"> <table class="table table-bordered table-striped table-hover"> <thead> <tr> <th ng-click="sort('StudentNo')"> Student No <span class="glyphicon sort-icon" ng-show="sortKey=='StudentNo'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span> </th> <th ng-click="sort('FirstName')"> First Name <span class="glyphicon sort-icon" ng-show="sortKey=='FirstName'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span> </th> </tr> </thead> <tbody> <tr ng-repeat="users in Users |orderBy:sortKey:reverse"> <td>{{users.StudentNo}}</td> <td>{{users.FirstName}}</td> </tr> </tbody> </table> </div> </div> </body> </html>
Script
<script> //declare a module var myAppModule = angular.module('myApp', []); myAppModule.controller('userCtrl', function ($scope) { $scope.Users = [ { "StudentNo": "1", "FirstName": "Prathap"}, { "StudentNo": "2","FirstName": "John"}, { "StudentNo": "3","FirstName": "Peter"} ]; //Function for sorting $scope.sort = function(keyname) { $scope.sortKey = keyname; //set the sortKey to the param passed $scope.reverse = !$scope.reverse; //if true make it false and vice versa }; }); </script>
Output
No comments:
Post a Comment