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.

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

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

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

1
2
3
4
$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

1
<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.

1
2
3
4
5
6
<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>

Share