Searching and sorting in angularjs

Tsurendra690-29180
Posted by Tsurendra690-29180 under AngularJS category on | Points: 40 | Views : 654
Searching and Sorting in angularjs
<!DOCTYPE html>
<html>
<head>
<title>Angularjs Application</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
body {
padding-top: 20px;
}
</style>
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="myctrl">
<div class="alert alert-warning">
<p>Sort type:{{sortType}}</p>
<p>Sort Reverse:{{sortReverse}}</p>
<p>SearchQuery:{{searchsearch}}</p>
</div>
<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-search"></span></div>
<input type="text" class="form-control" placeholder="Search" ng-model="searchsearch" />
</div>
</div>
</form>
<table class="table table-bordered table-stripped">
<thead>
<tr>
<td>
<a href="#" ng-click="sortType = 'name'; sortReverse = !sortReverse">
Name
<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 = 'Country'; sortReverse = !sortReverse">
Country
<span ng-show="sortType == 'Country' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'Country' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
<td>
<a href="#" ng-click="sortType = 'Salary'; sortReverse = !sortReverse">
Salary
<span ng-show="sortType == 'Salary' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'Salary' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
<td>
<a href="#" ng-click="sortType = 'Age'; sortReverse = !sortReverse">
Age
<span ng-show="sortType == 'Age' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'Age' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in records | orderBy:sortType:sortReverse | filter:searchsearch">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
<td>{{ x.Salary }}</td>
<td>{{ x.Age}}</td>
</tr>
</tbody>
</table>
</div>
<script>
var app = angular.module("myApp", [])
app.controller("myctrl", function ($scope) {
$scope.sortType = 'Name';
$scope.sortReverse = false;
$scope.searchsearch = '';
$scope.records = [
{
"Name": "John",
"Country": "America",
"Salary": "One",
"Age": "24"
},
{
"Name": "Ram",
"Country": "India",
"Salary": "Two",
"Age": "27"
},
{
"Name": "Raju",
"Country": "India",
"Salary": "Three",
"Age": "26"
},
{
"Name": "Ravi",
"Country": "India",
"Salary": "Four",
"Age": "31"
},
{
"Name": "Raghu",
"Country": "India",
"Salary": "Five",
"Age": "35"
},
{
"Name": "Ravan",
"Country": "India",
"Salary": "Six",
"Age": "33"
},
{
"Name": "Samy",
"Country": "India",
"Salary": "Seven",
"Age": "30"
},
{
"Name": "samuel",
"Country": "India",
"Salary": "Eight",
"Age": "30"
}
];
});
</script>
</body>
</html>

Comments or Responses

Login to post response