Using tabs reorder table

Posted on   |   In ,   |  

####Objective:####

  1. Example for using filter to set order by certain column with tab UI.
  2. Exampe for using ng-class to switch twitter bootstrap tabs.

<!-- more --> <iframe style="margin:20px 0; width: 100%; height: 300px" src="http://embed.plnkr.co/fMrhagVKl2nehzTOHriF" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Mark up for Twitter bootstrap tabGithub
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body ng-controller="MainCtrl">
<ul class="nav nav-pills">
    <li ng-class="{'active': order=='name'}">
        <a href="#" ng-click="setOrder('name')">name</a>
    </li>
    <li  ng-class="{'active': order=='phone'}">
        <a href="#" ng-click="setOrder('phone')">phone</a>
    </li>
</ul>
<ul>
    <li data-ng-repeat="friend in friends|orderBy:order">
        <span class="name"></span>
        <span class="phone"></span>
    </li>
</ul>

AngularJS controllerGithub
1
2
3
4
5
6
7
8
9
10
11
12
13
14
app.controller('MainCtrl', ['$scope', function ($scope) {
    'use strict';
    $scope.order = 'name';
    $scope.friends = [
        {name: 'John', phone: '555-1276'},
        {name: 'Mary', phone: '800-BIG-MARY'},
        {name: 'Mike', phone: '555-4321'},
        {name: 'Adam', phone: '555-5678'},
        {name: 'Julie', phone: '555-8765'}
    ];
    $scope.setOrder = function (order) {
        $scope.order = order;
    };
}]);