Home » AngularJS » Filtering and sorting using Angular JS

Filtering and sorting using Angular JS

in - on 9:13 AM - No comments
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="&lt;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
Labels:

Post a Comment