<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></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>
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;
};
}]);
/* Styles go here */