Skip to content

Instantly share code, notes, and snippets.

@syads321

syads321/gist:b16329429752fadff286

Created June 27, 2014 09:45
Show Gist options
  • Save syads321/b16329429752fadff286 to your computer and use it in GitHub Desktop.
Save syads321/b16329429752fadff286 to your computer and use it in GitHub Desktop.
Download ZIP
Custom filter hide show
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>AngularJS: Simple Custom Filter - jsFiddle demo by TahmidTanzim</title>
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.4/angular.min.js'></script>
<script type='text/javascript' src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular-resource.js"></script>
<style type='text/css'>
.ng-hide {
/* this is just another form of hiding an element */
display:block!important;
position:absolute;
top:-9999px;
left:-9999px;
}
.box-show-setup, .box-hide-setup {
-webkit-transition:all linear 0.1s;
-moz-transition:all linear 0.1s;
-ms-transition:all linear 0.1s;
-o-transition:all linear 0.1s;
transition:all linear 0.1s;
}
.box-show-setup { opacity:0; height: 0; }
.box-show-setup.box-show-start { opacity:1; height: 100px; }
.box-hide-setup { opacity:1; height: 0; }
.box-hide-setup.box-hide-start { opacity:0; height: 100px; }
</style>
<script type='text/javascript'>//<![CDATA[
'use strict';
var App = angular.module('clientApp', ['ngResource', 'App.filters']);
App.controller('ClientCtrl', ['$scope', function ($scope) {
$scope.selectedCompany = [];
$scope.companyList = [{
id: 1,
name: 'Apple'
}, {
id: 2,
name: 'Facebook'
}, {
id: 3,
name: 'Google'
}];
$scope.clients = [{
name: 'Brett',
designation: 'Software Engineer',
company: {
id: 1,
name: 'Apple'
}
}, {
name: 'Steven',
designation: 'Database Administrator',
company: {
id: 3,
name: 'Google'
}
}, {
name: 'Jim',
designation: 'Designer',
company: {
id: 2,
name: 'Facebook'
}
}, {
name: 'Michael',
designation: 'Front-End Developer',
company: {
id: 1,
name: 'Apple'
}
}, {
name: 'Josh',
designation: 'Network Engineer',
company: {
id: 3,
name: 'Google'
}
}, {
name: 'Ellie',
designation: 'Internet Marketing Engineer',
company: {
id: 1,
name: 'Apple'
}
}];
angular.forEach($scope.clients, function (id, index) {
$scope.clients[index].show = true;
});
$scope.setSelectedClient = function () {
var id = this.company.id;
if (_.contains($scope.selectedCompany, id)) {
$scope.selectedCompany = _.without($scope.selectedCompany, id);
} else {
$scope.selectedCompany.push(id);
}
return false;
};
$scope.isChecked = function (id) {
if (_.contains($scope.selectedCompany, id)) {
return 'icon-ok pull-right';
}
return false;
};
$scope.checkAll = function () {
$scope.selectedCompany = _.pluck($scope.companyList, 'id');
};
}]);
angular.module('App.filters', []).filter('companyFilter', [function () {
return function (clients, selectedCompany) {
if (!angular.isUndefined(clients) && !angular.isUndefined(selectedCompany) && selectedCompany.length > 0) {
var tempClients = [];
var cacheClients = clients;
angular.forEach(cacheClients, function(id, index){
cacheClients[index].show = false;
});
angular.forEach(selectedCompany, function(item, index) {
var id = item;
angular.forEach(cacheClients, function(item, index) {
var companyid = item.company.id;
console.log(companyid, id);
if (angular.equals(companyid, id)) {
item.show = true;
}
});
})
return cacheClients
} else {
return clients;
}
};
}]);
//]]>
</script>
</head>
<body data-ng-app="clientApp">
<div data-ng-controller="ClientCtrl">
<ul class="inline">
<li>
<div class="alert alert-info">
<h4>Total Filtered Client: {{filtered.length}}</h4>
</div>
</li>
<li>
<div class="btn-group" data-ng-class="{open: open}">
<button class="btn">Filter by Company</button>
<button class="btn dropdown-toggle" data-ng-click="open=!open"><span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu">
<li><a data-ng-click="checkAll()"><i class="icon-ok-sign"></i> Check All</a>
</li>
<li><a data-ng-click="selectedCompany=[];"><i class="icon-remove-sign"></i> Uncheck All</a>
</li>
<li class="divider"></li>
<li data-ng-repeat="company in companyList"> <a data-ng-click="setSelectedClient()">{{company.name}}<span data-ng-class="isChecked(company.id)"></span></a>
</li>
</ul>
</div>
</li>
</ul>
<hr/>
<h3>Clients Table:</h3>
<table class="table table-hover table-striped">
<thead>
<tr>
<th style="width:10%">#</th>
<th style="width:20%">Name</th>
<th style="width:40%">Designation</th>
<th style="width:30%">Company</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="client in filtered = (clients | companyFilter:selectedCompany)">
<td ng-show="client.show" ng-animate="'box'">{{$index + 1}}</td>
<td ng-show="client.show" ng-animate="'box'"><em>{{client.name}}</em>
</td>
<td ng-show="client.show" ng-animate="'box'">{{client.designation}}</td>
<td ng-show="client.show" ng-animate="'box'">{{client.company.name}}</td>
</tr>
</tbody>
</table>
<!-- <pre>{{selectedCompany|json}}</pre>
<pre>{{companyList|json}}</pre>
<pre>{{clients|json}}</pre>
-->
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment