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.

 

image

DEMO: http://angularjs-webapi-crud-grid.azurewebsites.net/

CODE: https://github.com/jonbgallant/AngularJS-WebApi-EF

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')">
<div>
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>
</div>
</th>