Filtering and sorting using Angular JS
Step 1 :- Create file index.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js"> </script>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="<link href=" netdna.bootstrapcdn.com="" twitter-bootstrap="" 2.3.0="" css="" bootstrap-combined.min.css"="" rel="stylesheet">"></script>
</head>
<body>
<div ng-app class="ng-scope">
<span class="bold">Filtering and sorting using Angular JS</span>
<br /><br />
<div ng-controller="ShoppingCartCtrl">
<div>Sort by:
<select ng-model="sortExpression">
<option value="Name">Name</option>
<option value="Price">Price</option>
<option value="Quantity">Quantity</option>
</select>
</div>
<br />
<div><strong>Filter Results</strong></div>
<table>
<tr>
<td>By Any: </td>
<td><input type="text" ng-model="search.$" /></td>
</tr>
<tr>
<td>By Name: </td>
<td><input type="text" ng-model="search.Name" /></td>
</tr>
<tr>
<td>By Price: </td>
<td><input type="text" ng-model="search.Price" /></td>
</tr>
<tr>
<td>By Quantity: </td>
<td><input type="text" ng-model="search.Quantity" /></td>
</tr>
</table>
<br />
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items | orderBy:mySortFunction | filter:search">
<td>{{item.Name}}</td>
<td>{{item.Price | currency}}</td>
<td>{{item.Quantity}}</td>
</tr>
</tbody>
</table>
<br />
</div>
</div>
</body></html>
- Step 2 : create file app.js
function ShoppingCartCtrl($scope) {
$scope.items = [
{Name: "Soap", Price: "25", Quantity: "10"},
{Name: "Shaving cream", Price: "50", Quantity: "15"},
{Name: "Shampoo", Price: "100", Quantity: "5"}
];
$scope.mySortFunction = function(item) {
if(isNaN(item[$scope.sortExpression]))
return item[$scope.sortExpression];
return parseInt(item[$scope.sortExpression]);
}
}
- Step 3 : Create style.css
.bold { font-weight:bold; }
table td{
padding: 10px;
}
table th{
font-weight: bold;
text-align: center;
}
- Demo
http://listexample.blogspot.com/p/angular.html
If you enjoyed this article, you might also like..
Posts
