sivaprasadreddy/angularjs-filters.html

## 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>

	<!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>