I just added sorting and upgraded to AngularJS 1.2.0 and Bootstrap 3.
CODE: https://github.com/jongio/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>