Home > UI Developer > AngularJS sorting rows by table header ?

AngularJS sorting rows by table header ?

May 22, 2017 Leave a comment Go to comments

Another way to do this in AngularJS is to use a Grid.

The advantage with grids is that the row sorting behavior you are looking for is included by default.

The functionality is well encapsulated. You don’t need to add ng-click attributes, or use scope variables to maintain state:

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

  $scope.myData = {
    employees: [{
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }, {
      firstName: 'Frank',
      lastName: 'Burns',
      age: 54
    }, {
      firstName: 'Sue',
      lastName: 'Banter',
      age: 21
    }]
  };

  $scope.gridOptions = {
    data: 'myData.employees',
    columnDefs: [{
      field: 'firstName',
      displayName: 'First Name'
    }, {
      field: 'lastName',
      displayName: 'Last Name'
    }, {
      field: 'age',
      displayName: 'Age'
    }]
  };
});
/*style.css*/
.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 400px;
    height: 200px
}
<!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" />
         src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js">
         src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js">
         src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular-animate.js">
         type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js">
         type="text/javascript" src="main.js">
    </head>
    <body ng-controller="MyCtrl">
class=“gridStyle” ng-grid=“gridOptions”>

 


    </body>
</html>

 

Categories: UI Developer
  1. No comments yet.
  1. No trackbacks yet.

Leave a comment