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

2013-09-27

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 = &#123; field: 'Name', asc: true &#125;;

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

$scope.setOrderBy = function (field) &#123;
    var asc = $scope.orderBy.field === field ? !$scope.orderBy.asc : true;
    $scope.orderBy = &#123; field: field, asc: asc &#125;;
&#125;

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="&#123;'glyphicon-sort-by-alphabet': orderBy.asc, 'glyphicon-sort-by-alphabet-alt': !orderBy.asc&#125;" ng-show="orderBy.field == 'Name'"></i>
    </div>
</th>

TechTutorials