In this Example we learn how searching the any random value from given list and also learn how to sort or orderby list in ascending and descending.
For searching we are you to filter property of angular js and for shorting we use orderby property of angular js
Example:-
Html:-
<!DOCTYPE html>
<html ng-app="unified">
<head>
<meta charset="utf-8" />
<title>Image Upload</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="container" >
Search : <input ng-model="search" type="text" />
<table class="friend">
<tr>
<th ng-click="sort('name')">Name
<span class="glyphicon sort-icon" ng-show="sortBy=='SortOrder'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th ng-click="sort('phone')">Phone
<span class="glyphicon sort-icon" ng-show="sortBy=='SortOrder'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th ng-click="sort('age')">Age
<span class="glyphicon sort-icon" ng-show="sortBy=='SortOrder'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th ng-click="sort('sex')">Sex
<span class="glyphicon sort-icon" ng-show="sortBy=='SortOrder'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
</tr>
<tr ng-repeat="friend in friends|orderBy:sortBy:reverse | filter: search">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<td>{{friend.age}}</td>
<td>{{friend.sex}}</td>
</tr>
</table>
</div>
</body>
</html>
Script:-
var app = angular.module('unified', []);
app.controller('MainCtrl', function($scope) {
var friends = [
{ "name": 'gautam', "phone": '1234567890', "age": 10, "sex":'male' },
{ "name": 'Mary', "phone": '6549871230', "age": 19, "sex":'male' },
{ "name": 'karan', "phone": '9874563210', "age": 21, "sex":'male' },
{ "name": 'rohan', "phone": '1239874565', "age": 35, "sex":'male' },
{ "name": 'jack', "phone": '02589631477', "age": 29, "sex":'Female' }
];
$scope.friends = friends;
$scope.sort = function (keyname) {
$scope.sortBy = keyname; //set the sortBy to the param passed
$scope.reverse = !$scope.reverse; //if true make it false and vice versa
}
});
Now we have set all things above script add in head section or before body end of page
It work fine let see the output.
Example Link
Hope you like the post .Please share and comment below or customer care section
Thanks.
0 Comments