AngularJS_App_Example/table.html at master · IreneIrene/AngularJS_App_Example · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<table class="table table-bordered table-striped">
    <thead>
    <tr>
        <td>
            <a href="#" ng-click="ctrl.sortType = 'firstname'; ctrl.sortReverse = !ctrl.sortReverse">
                First Name
                <span ng-show="ctrl.sortType == 'firstname' && !ctrl.sortReverse" class="fa fa-caret-down"></span>
                <span ng-show="ctrl.sortType == 'firstname' && ctrl.sortReverse" class="fa fa-caret-up"></span>
            </a>
        </td>
        <td>
            <a href="#" ng-click="ctrl.sortType = 'lastname'; ctrl.sortReverse = !ctrl.sortReverse">
                Last Name
                <span ng-show="ctrl.sortType == 'lastname' && !ctrl.sortReverse" class="fa fa-caret-down"></span>
                <span ng-show="ctrl.sortType == 'lastname' && ctrl.sortReverse" class="fa fa-caret-up"></span>
            </a>
        </td>
        <td>
            <a href="#" ng-click="ctrl.sortType = 'phone'; ctrl.sortReverse = !ctrl.sortReverse">
                Phone
                <span ng-show="ctrl.sortType == 'phone' && !ctrl.sortReverse" class="fa fa-caret-down"></span>
                <span ng-show="ctrl.sortType == 'phone' && ctrl.sortReverse" class="fa fa-caret-up"></span>
            </a>
        </td>
        <td>
            <a href="#" ng-click="ctrl.sortType = 'gender'; ctrl.sortReverse = !ctrl.sortReverse">
                Gender
                <span ng-show="ctrl.sortType == 'gender' && !ctrl.sortReverse" class="fa fa-caret-down"></span>
                <span ng-show="ctrl.sortType == 'gender' && ctrl.sortReverse" class="fa fa-caret-up"></span>
            </a>
        </td>
        <td>
            <a href="#" ng-click="ctrl.sortType = 'age'; ctrl.sortReverse = !ctrl.sortReverse">
                Age
                <span ng-show="ctrl.sortType == 'age' && !ctrl.sortReverse" class="fa fa-caret-down"></span>
                <span ng-show="ctrl.sortType == 'age' && ctrl.sortReverse" class="fa fa-caret-up"></span>
            </a>
        </td>
        <td><a href="#">Action</a></td>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="user in ctrl.users | orderBy:ctrl.sortType:ctrl.sortReverse track by $index" ng-cloak>
        <td>{{user.firstname}}</td>
        <td>{{user.lastname}}</td>
        <td>{{user.phone}}</td>
        <td>{{user.gender}}</td>
        <td>{{user.age}}</td>
        <td><button class="btn btn-sm btn-danger" ng-click="ctrl.remove(user)">Remove</button></td>
    </tr>
    </tbody>
</table>