angularjs_table_sort_filter2

by Nguyen Van Giang

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<title>AngularJS Table Normal Using $even and $odd</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, filterFilter) {
        $scope.sortType     = 'name';
        $scope.sortReverse  = false;
        $scope.students = [
            {name:'Lien',address:'Ha Noi', point: 5},
            {name:'Linh',address:'Can Tho', point: 6},
            {name:'Thu',address:'Da Nang', point: 4},
            {name:'Hoa',address:'Hai Phong', point: 8},
            {name:'Nga',address:'Phu Tho', point: 10},
            {name:'Loan',address:'Ha Noi', point: 7},
        ];
    });
</script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
    <div ng-app="myApp" ng-controller="myCtrl">
          <form>
            <div class="form-group">
              <div class="input-group">
                <div class="input-group-addon"><i class="fa fa-search"></i></div>
                <input type="text" class="form-control" placeholder="Search Any" ng-model="search.$">
              </div>      
            </div>
          </form>
        <table>
            <thead>
              <tr>
                <td>
                  <a href="#" ng-click="sortType = 'name'; sortReverse = !sortReverse">
                    Students 
                    <span ng-show="sortType == 'name' && !sortReverse" class="fa fa-caret-down"></span>
                    <span ng-show="sortType == 'name' && sortReverse" class="fa fa-caret-up"></span>
                  </a>
                </td>
                <td>
                  <a href="#" ng-click="sortType = 'address'; sortReverse = !sortReverse">
                  Address 
                    <span...

CSS

body {
    margin: 20px;
}
table, th , td  {
              border: 1px solid grey;
              border-collapse: collapse;
              padding: 10px;
            }
            table tr:nth-child(odd)	{
              background-color: #f1f1f1;
            }
            table tr:nth-child(even) {
              background-color: #ffffff;
            }