JSFiddle - React, Tailwind, and code Playground
by Stéphane Cabaret
HTML
<script src="http://code.angularjs.org/1.2.16/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MainCtrl">
<input ng-model="characteristics.red" type="checkbox" >red</input>
<input ng-model="characteristics.white" type="checkbox" >white</input>
<input ng-model="characteristics.rose" type="checkbox" >rose</input>
<input ng-model="characteristics.champagne" type="checkbox" >champagne</input>
<br><br>
<input ng-model="characteristics.leger" type="checkbox" >leger</input>
<input ng-model="characteristics.fort" type="checkbox" >fort</input>
<br><br>
<input ng-model="characteristics.france" type="checkbox" >france</input>
<input ng-model="characteristics.italie" type="checkbox" >italie</input>
<br><br>
<div ng-hide="boolValue2"
ng-repeat="wine in filtered= (wines |filteredstoves:characteristics) | filteredstoves:characteristics">{{wine.name}} - {{wine.characteristics}}</div>
<br><br>
Filtered list has {{filtered.length}} items
</div>
</div>
JavaScript
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.wines = [
{ "name": "Wine B", "characteristics": ["red", "leger", "france"] },
{ "name": "wine C", "characteristics": ["white", "italie"]},
{ "name": "Wine D", "characteristics": ["red" , "italie"]},
{ "name": "Wine E", "characteristics": ["red", "france"] },
{ "name": "wine F", "characteristics": ["white", "fort"] },
{ "name": "wine G", "characteristics": ["champagne", "fort"]},
{ "name": "wine H", "characteristics": ["champagne_rose", "leger"] },
{ "name": "wine H", "characteristics": ["rose", "leger"] }
];
$characteristics = {}
}).filter('filteredstoves', function() {
return function(stoves, characteristics) {
var result = stoves.slice(); // copy array
angular.forEach(characteristics, function(value, key) {
if(value) {
for(var index = 0; index < result.length; index++) {
wine = result[index];
if(wine.characteristics.indexOf(key) == -1) {
result.splice(index--,1);
}
}
}
});
return result;
}
});