Jon Gallant

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

1 min read
angular

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

Screenshot

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 };


```javascript


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


```javascript


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


```text


3\. Binding the row orderBy to the orderBy scope property


```html


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


```csharp


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


```html


<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:
Share on X