javascript - grid sorting in AngularJs -
i new angularjs. got data in table using ng-repeat. now, trying sort table columns. not happening. please give me 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 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 below
[ { "name": "manoj", "department": "design" }, { "name": "srikant", "department": "business" } ] thanks in advance.
in view, set in comments @tanmay, should call sort() instead of sort{}
code example:
angular .module("authorsapp", []) .controller("myauthors", function ($scope) { // authors 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>
Comments
Post a Comment