var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
var me = this;
//------------------------------------------------------------------
// Each filter you want to process should go in the MAP method
//------------------------------------------------------------------
$scope.filters = function(item, index) {
var t_results = _.map([$scope.filter1, $scope.filter2, $scope.filter3], function(fnc) {
return(_.isFunction(fnc) ? fnc(item,index) : true);
});
return(t_results.every(function(e) {return(e == true);}));
};
// Data
$scope.filter1 = '';
$scope.filter2 = '';
$scope.filter3 = '';
$scope.name = 'World';
$scope.citrus = ['orange',
'lemon'];
$scope.vegetables = ['tomato',
'zucchini'];
$scope.fruits = ['orange',
'banana',
'lemon',
'apple',
'kiwi',
'pineapple',
'pear'];
$scope.edibleSkin = ['tomato',
'apple',
'pear'];
$scope.basket = ['orange',
'banana',
'lemon',
'tomato',
'apple',
'zucchini',
'kiwi',
'pineapple',
'pear'];
// Methods - filters
$scope.filterNone = function(item,index) {
return(true);
};
me.funcIsInList = function(list) {
return(function(item,index) {
for (var i in list) {
if (list[i] === item)
return(true);
}
return(false);
});
};
$scope.filterCitrus = me.funcIsInList($scope.citrus);
$scope.filterVegetables = me.funcIsInList($scope.vegetables);
$scope.filterFruits = me.funcIsInList($scope.fruits);
$scope.filterEdibleSkin = me.funcIsInList($scope.edibleSkin);
$scope.filterOdd = function(item, index) {
return(index % 2 === 1);
};
$scope.filterEven = function(item, index) {
return(index % 2 === 0);
};
$scope.setNone = function() {
$scope.filter1 = $scope.filter2 = $scope.filter3 = '';
};
// $scope.setCitrus = function() {
// $scope.filter = $scope.filterCitrus;
// };
// $scope.setOdd = function() {
// $scope.filter = $scope.filterOdd;
// };
// $scope.setEven = function() {
// $scope.filter = $scope.filterEven;
// };
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script data-require="lodash.js@4.6.1" data-semver="4.6.1" src="https://cdn.jsdelivr.net/lodash/4.6.1/lodash.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<button ng-click="setNone()">No filter</button>
<br><br>
<button ng-click="filter1 = (filter1 == filterOdd) ? '' : filterOdd"
ng-class="{'active': filter1 == filterOdd}">Odd</button>
<button ng-click="filter1 = (filter1 == filterEven) ? '' : filterEven"
ng-class="{'active': filter1 == filterEven}">Even</button>
<br>
<button ng-click="filter2 = (filter2 == filterFruits) ? '' : filterFruits"
ng-class="{'active': filter2 == filterFruits}">Fruits</button>
<button ng-click="filter2 = (filter2 == filterVegetables) ? '' : filterVegetables"
ng-class="{'active': filter2 == filterVegetables}">Vegetables</button>
<button ng-click="filter2 = (filter2 == filterCitrus) ? '' : filterCitrus"
ng-class="{'active': filter2 == filterCitrus}">Citrus</button>
<br>
<button ng-click="filter3 = (filter3 == filterEdibleSkin) ? '' : filterEdibleSkin"
ng-class="{'active': filter3 == filterEdibleSkin}">EdibleSkin</button>
<hr>
<ul>
<!-- <li ng-repeat="b in basket | filter: filter1
| filter: filter2
| filter: filter3">
-->
<li ng-repeat="b in basket | filter: filters">
<span ng-bind="b"></span>
</li>
</ul>
</body>
</html>
/* Put your css in here */
button {
background: #eee;
border: 1px solid #ccc;
width: 80px;
margin: 2px;
cursor: pointer;
}
button:hover {
background: #ddd;
}
button.active {
background: orange;
font-weight: bold;
color: white;
}