Skip to content

Instantly share code, notes, and snippets.

Created September 15, 2014 06:28
Show Gist options
  • Save sivaprasadreddy/fbee047803d14631fafd to your computer and use it in GitHub Desktop.
Save sivaprasadreddy/fbee047803d14631fafd to your computer and use it in GitHub Desktop.
AngularJS filters final HTML
<!DOCTYPE html>
<html ng-app="myApp">
<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="//" rel="stylesheet" type="text/css"/>
<script src="//"></script>
<script src="//"></script>
<script src="//"></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( != -1){
return data;
<body ng-controller="SampleController">
<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="">
<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="{{}}">{{}}</option>
<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>
<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">
<h3>Search Results</h3>
<table class="table table-striped table-bordered">
<tr ng-repeat="txn in transactions| filter: filterTxn | expenditurePayeeFilter:searchCriteria:'EXPENDITURE'">
<td>{{$index + 1}}</td>
Copy link

Please i want to know how to fetch data from database if i have four column.....
like accontname | accounttype | payeename | amount ....witout using id...

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