JSFiddle - React, Tailwind, and code Playground
HTML
<div data-ng-app data-ng-controller="myCtrl">
<label ng-repeat="c in classes">
<input type="checkbox" ng-model="selected[c]" />
<span>{{c}}</span>
</label>
<div ng-repeat="card in cards | filter:showCards">
<h2>{{card.name}}</h2>
<p><em>{{card.text}}</em></p>
</div>
</div>
JavaScript
function myCtrl($scope){
$scope.selected = {};
$scope.classes = ["horror","space"];
$scope.cards = [{
name: "John",
text: "Something about John",
slugs: ["sci-fi", "space"]
},{
name: "John",
text: "Something else about John",
slugs: ["horror", "supernatural"]
},{
name: "Peter",
text: "Something about Peter",
slugs: ["space"]
}];
function isChecked(obj){
var checked = [];
for(var key in obj){
if(obj[key])
checked.push(key);
}
return checked;
};
$scope.showCards = function(card){
var checked = isChecked($scope.selected);
return checked.indexOf(card.name) > -1;
};
}