Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Example file from blog post on Angular sorting / filtering.
<h1 id="header">
Food Inventory
</h1>
<div id="content" ng-controller="FoodController">
<div class="filter">
<label for="filter">filter:</label>
<input type="text" name="filter" ng-model="filter" />
</div>
<table>
<thead>
<tr class="row">
<th><a ng-click="changeSort('name')">Name</a></th>
<th><a ng-click="changeSort('type')">Type</a></th>
<th><a ng-click="changeSort('expiration')">Expiration</a></th>
<th><a ng-click="changeSort('quantity')">Quantity</a></th>
<th><a ng-click="changeSort('percentRemaining')">Percent Remaining</a></th>
</tr>
</thead>
<tbody>
<tr class="row" ng-repeat="f in food | filter:filter | orderBy:sort:reverse">
<td>{{f.name}}</td>
<td>{{f.type}}</td>
<td>{{f.expiration}}</td>
<td>{{f.quantity}}</td>
<td class="progress"><div class="bar" style="width: {{f.percentRemaining}}%"</td>
</tr>
</tbody>
</table>
<button ng-click="toggleForm()" ng-hide="isFormActive">Add One</button>
<button ng-click="toggleForm()" ng-show="isFormActive">Hide Form</button>
<form ng-show="isFormActive">
<hr />
<label for="name">Name:</label>
<input name="name" ng-model="editableFood.name" />
<br />
<label for="type">Type:</label>
<input name="type" ng-model="editableFood.type" />
<br />
<label for="expiration">Expiration</label>
<input name="expiration" ng-model="editableFood.expiration" />
<br />
<label for="quantity">Quantity</label>
<input name="quantity" ng-model="editableFood.quantity" />
<br />
<label for="percentRemaining">Percent Remaining</label>
<input name="percentRemaining" ng-model="editableFood.percentRemaining" /><br />
<div class="span4 text-right">
<div class="row">
<button ng-click="toggleForm()">Cancel</button>
<button ng-click="addFood()">Add</button>
</div>
</div>
</form>
</div>
<div id="footer">
<a target="_blank" href="http://sailsjs.com" class="copyright">Built with Sails.js</a>
</div>
<style type="text/css">
label { width: 150px; display:inline-block; text-align:right; }
button { margin-right: 10px;}
.text-right { text-align: right;}
</style>
<script type='text/javascript'>
var foodApp = angular.module('foodApp', ['ngResource']);
foodApp.factory('Food', ['$resource', function($resource){
return $resource('/food/:id', {id:'@id'});
}]);
function FoodController($scope, Food){
$scope.food = Food.query();
$scope.isFormActive = false;
$scope.sort = "name";
$scope.reverse = false;
$scope.changeSort = function(value){
if ($scope.sort == value){
$scope.reverse = !$scope.reverse;
return;
}
$scope.sort = value;
$scope.reverse = false;
}
$scope.toggleForm = function(){
if ($scope.isFormActive){
$scope.isFormActive = false;
return;
}
$scope.isFormActive = true;
$scope.editableFood = new Food();
};
$scope.addFood = function(){
$scope.editableFood.$save();
$scope.food.push($scope.editableFood);
$scope.toggleForm();
};
};
</script>

since in the above your doing order but why you used filter as well in ordering

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment