<html>
<head>
<title> Angular JS table sort and filter example </title>
<script src="../Script/angular.min.js"></script>
<script>
var app = angular.module('MyForm', []);
app.controller('myCtrl', function ($scope) {
$scope.predicate = 'name';
$scope.reverse = true;
$scope.order = function (predicate) {
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
$scope.predicate = predicate;
};
});
</script>
<style>
.odd {
background-color: antiquewhite;
color: #008b8b;
}
td th {
height: 30px;
min-width: 100px;
}
thead {
background-color: darkcyan;
color: white;
height: 30px;
}
</style>
</head>
<body ng-app="MyForm" ng-controller="myCtrl">
<h3>List students</h3>
<div ng-init=" students = [
{name: 'Kevin', age: 25, gender: 'boy'},
{name: 'John', age: 30, gender: 'girl'},
{name: 'Laura', age: 28, gender: 'girl'},
{name: 'Joy', age: 15, gender: 'girl'},
{name: 'Mary', age: 28, gender: 'girl'},
{name: 'Peter', age: 95, gender: 'boy'},
{name: 'Bob', age: 50, gender: 'boy'},
{name: 'Erika', age: 27, gender: 'girl'},
{name: 'Patrick', age: 40, gender: 'boy'},
{name: 'Tery', age: 60, gender: 'girl'}
] ">
<pre>Click header link to sort, input into filter text to filter</pre>
<hr />
<table class="table table-striped">
<thead>
<tr>
<th>
<a href="" ng-click="order('name')">Name</a>
</th>
<th><a href="" ng-click="order('age')"> Age</a> </th>
<th><a href="" ng-click="order('gender')">Gender</a> </th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type="text" ng-model="search.name" /></td>
<td> <input type="text" ng-model="search.age" /> </td>
<td><input type="text" ng-model="search.gender" /> </td>
</tr>
<tr ng-repeat="user in students | orderBy:predicate:reverse | filter:search" ng-class-odd="'odd'">
<td>{{ user.name}}</td>
<td>{{ user.age}}</td>
<td>{{ user.gender}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
No comments:
Post a Comment