Filtering and sorting using Angular JS

Step 1 :
- Create file index.html
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="//">   </script>
 <link rel="stylesheet" type="text/css" href="style.css">
  <script type="text/javascript" src="&lt;link href=""" twitter-bootstrap="" 2.3.0="" css="" bootstrap-combined.min.css"="" rel="stylesheet">"></script>
<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>

<br />
<div><strong>Filter Results</strong></div>
<td>By Any: </td>
<td><input type="text" ng-model="search.$" /></td>
<td>By Name: </td>
<td><input type="text" ng-model="search.Name" /></td>
<td>By Price: </td>
<td><input type="text" ng-model="search.Price" /></td>
<td>By Quantity: </td>
<td><input type="text" ng-model="search.Quantity" /></td>
            <br />
            <table border="1">
<tr ng-repeat="item in items | orderBy:mySortFunction | filter:search">
<td>{{item.Price | currency}}</td>
<br />
-  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) {
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

Post a Comment