<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angularjs@1.4.9" data-semver="1.4.9" src="//code.angularjs.org/1.4.9/angular.min.js"></script>
<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script data-require="checklist-model.js@*" data-semver="0.0.1" src="//vitalets.github.io/checklist-model/checklist-model.js"></script>
<script data-require="angular-filter@0.5.7" data-semver="0.5.7" src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.7/angular-filter.js"></script>
<script data-require="lodash.js@4.13.1" data-semver="4.13.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="checkboxes">
<ul>
<li ng-repeat="(key, value) in list | countBy: 'parent'">
<input type="checkbox" checklist-model="selectedParent" checklist-value="key" data="{{::key}}" ng-change="checkParent(key, checked)"/>
{{::key}} <span class="badge">{{::value}}</span>
</li>
</ul>
<ul>
<li ng-repeat="(key, value) in list | selected:selectedParent:'parent' | countBy: 'type'">
<input type="checkbox" checklist-model="selectedType" checklist-value="key" data="{{::key}}" ng-change="check(key)" />
{{::key}} <span class="badge">{{::value}}</span>
</li>
</ul>
<ul>
<li ng-repeat="item in filtered">{{ item.type }}</li>
</ul>
</body>
</html>
// Code goes here
var app = angular.module('app', ['angular.filter', 'checklist-model'] );
app.controller( 'checkboxes', [ '$scope', function( $scope ) {
$scope.list = [
{ parent : 'fruit', type : 'orange' },
{ parent: 'fruit', type : 'apple' },
{ parent : 'fruit', type : 'kiwi' },
{ parent : 'vegetable', type : 'kale' },
{ parent : 'vegetable', type : 'cabbage' }
];
$scope.filtered = $scope.list;
$scope.selectedType = [];
$scope.selectedParent = [];
$scope.checkParent = function(parent, checked) {
if (!checked) {
var typesToUncheck = _.map(_.filter($scope.list, function(fruit) {
return fruit.parent === parent;
}), 'type');
$scope.selectedType = _.difference($scope.selectedType, typesToUncheck);
}
};
}]);
app.filter('selected', function() {
return function(objects, array, prop, prop2) {
return _.filter(objects, function(obj) {
return _.includes(array, obj[prop]);
});
};
});
/* Styles go here */