developer musician photographer

Friday, September 27, 2013

AngularJS CRUD Grid v4: Sorting, AngularJS 1.2.0 & Bootstrap 3


I just added sorting and upgraded to AngularJS 1.2.0 and Bootstrap 3.





I’ll eventually put the into directives, just ran out of time today.


1. Added ‘orderBy’ property to the controller scope

$scope.orderBy = { field: 'Name', asc: true };


2. Added setOrderBy function to scope. If we are resorting current field then flip direction.

$scope.setOrderBy = function (field) {
var asc = $scope.orderBy.field === field ? !$scope.orderBy.asc : true;
$scope.orderBy = { field: field, asc: asc };


3. Binding the row orderBy to the orderBy scope property

<tr ng-repeat="object in objects | orderBy:orderBy.field:!orderBy.asc">


4. Calling setOrderBy on th click and binding glyphicon class to orderBy property. Yes, this can be a directive.

<th ng-click="setOrderBy('Name')">
<i class="glyphicon" ng-class="{'glyphicon-sort-by-alphabet': orderBy.asc, 'glyphicon-sort-by-alphabet-alt': !orderBy.asc}" ng-show="orderBy.field == 'Name'"></i>