Skip to content

Instantly share code, notes, and snippets.

@nguyentamvinhlong

nguyentamvinhlong/angularjs-filters.html

Forked from sivaprasadreddy/angularjs-filters.html
Last active August 29, 2015 14:27
Show Gist options
  • Save nguyentamvinhlong/5f25703ce0700e29258b to your computer and use it in GitHub Desktop.
Save nguyentamvinhlong/5f25703ce0700e29258b to your computer and use it in GitHub Desktop.
Download ZIP
AngularJS filters final HTML
Raw
angularjs-filters.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
var myApp = angular.module('myApp',[]);
myApp.controller('SampleController', function($scope){
$scope.accounts = [
{id: 1, name: 'Cash'},
{id: 2, name: 'Bank Savings'}
];
$scope.payees = [
{id:'1',name:'HouseRent', txnType:'EXPENDITURE'},
{id: '2', name:'InternetBill', txnType:'EXPENDITURE'},
{id:'3', name: 'PowerBill', txnType:'EXPENDITURE'},
{id:'4', name: 'Salary', txnType:'INCOME'}
];
$scope.transactions = [
{id:'1', txnType:'EXPENDITURE', amount: 1000, account: $scope.accounts[0], payee: $scope.payees[0]},
{id:'2', txnType:'EXPENDITURE', amount: 500, account: $scope.accounts[1], payee: $scope.payees[1]},
{id:'3', txnType:'EXPENDITURE', amount: 1200, account: $scope.accounts[0], payee: $scope.payees[1]},
{id:'4', txnType:'INCOME', amount: 5000, account: $scope.accounts[1], payee: $scope.payees[3]},
{id:'5', txnType:'EXPENDITURE', amount:200, account: $scope.accounts[0], payee: $scope.payees[2]}
];
});
myApp.filter('expenditurePayeeFilter', [function($filter) {
return function(inputArray, searchCriteria, txnType){
if(!angular.isDefined(searchCriteria) || searchCriteria == ''){
return inputArray;
}
var data=[];
angular.forEach(inputArray, function(item){
if(item.txnType == txnType){
if(item.payee.name.toLowerCase().indexOf(searchCriteria.toLowerCase()) != -1){
data.push(item);
}
}
});
return data;
};
}]);
</script>
</head>
<body ng-controller="SampleController">
<br/>
<div class="col-md-8 col-md-offset-2">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="input1" class="col-sm-4 control-label">Search by Payee</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="input1" placeholder="Payee Name" ng-model="filterTxn.payee.name">
</div>
</div>
<div class="form-group">
<label for="input2" class="col-sm-4 control-label">Search By Account</label>
<div class="col-sm-6">
<select id="input2" class="form-control" ng-model="filterTxn.account">
<option value="">All Accounts</option>
<option ng-repeat="item in accounts" value="{{item.id}}">{{item.name}}</option>
</select>
</div>
</div>
<div class="form-group">
<label for="input3" class="col-sm-4 control-label">Search By Type</label>
<div class="col-sm-6">
<select id="input3" class="form-control" ng-model="filterTxn.txnType">
<option value="">All Types</option>
<option value="EXPENDITURE">EXPENDITURE</option>
<option value="INCOME">INCOME</option>
</select>
</div>
</div>
<div class="form-group">
<label for="input4" class="col-sm-4 control-label">Search by Expenditure Payees</label>
<div class="col-sm-6">
<input id="input4" type="text" class="form-control" ng-model="searchCriteria">
</div>
</div>
</form>
<h3>Search Results</h3>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th>Account</th>
<th>Type</th>
<th>Payee</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="txn in transactions| filter: filterTxn | expenditurePayeeFilter:searchCriteria:'EXPENDITURE'">
<td>{{$index + 1}}</td>
<td>{{txn.account.name}}</td>
<td>{{txn.txnType}}</td>
<td>{{txn.payee.name}}</td>
<td>{{txn.amount}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment