I am trying to get these three sections of checkboxes to filter with Angular and am a little lost at this point. The following is my code, any help would be greatly appreciated as I have been messing with this for a day and a half.
var filterMod = angular.module('angularNav', [])
.controller('angularController', function($scope) {
//sample data
var tags = [];
var program1 = {
name:'By Program',
properties: [
{name:'By Program',value:'Financial Inclusion'}, {name:'By Program',value:'Education and Learning'},
{name:'By Program',value:'Youth Livelihoods'}, {name:'By Program',value:'Scholars Program'},
]
};
var program2 = {
name:'By Region',
properties:[
{name:'By Region',value:'Sub-Saharan Africa'}, {name:'By Region',value:'Benin'}, {name:'By Region',value:'Burkina Faso'}, {name:'By Region',value:'Burundi'},
{name:'By Region',value:'Cameroon'}, {name:'By Region',value:'Cote dIvoir'}, {name:'By Region',value:'Democratic Republic of the Congo'},
{name:'By Region',value:'Djibouti'}, {name:'By Region',value:'Ethiopia'}, {name:'By Region',value:'Ghana'}, {name:'By Region',value:'Kenya'},
{name:'By Region',value:'Madagascar'}, {name:'By Region',value:'Malawi'}, {name:'By Region',value:'Mauritius'}, {name:'By Region',value:'Mozambique'},
{name:'By Region',value:'Liberia'}, {name:'By Region',value:'Rwanda'}, {name:'By Region',value:'Uganda'}, {name:'By Region',value:'Senegal'},
{name:'By Region',value:'South Africa'}, {name:'By Region',value:'Tanzania'}, {name:'By Region',value:'Togo'}, {name:'By Region',value:'Zambia'},
{name:'By Region',value:'Zimbabwe'}, {name:'By Region',value:'Northern Africa'}, {name:'By Region',value:'Egypt'}, {name:'By Region',value:'Morocco'},
{name:'By Region',value:'Northern America'}, {name:'By Region',value:'Canada'}, {name:'By Region',value:'United States of America'},
{name:'By Region',value:'Latin America and the Caribbean'}, {name:'By Region',value:'Columbia'}, {name:'By Region',value:'Costa Rica'},
{name:'By Region',value:'Dominican Republic'}, {name:'By Region',value:'Guatemala'}, {name:'By Region',value:'Honduras'}, {name:'By Region',value:'Haiti'},
{name:'By Region',value:'Paraguay'}, {name:'By Region',value:'Peru'}, {name:'By Region',value:'Asia'}, {name:'By Region',value:'Lebanon'},
{name:'By Region',value:'Nepal'}
]
};
var program3 = {
name:'By Theme',
properties: [
{name:'By Theme',value:'Agriculture'}, {name:'By Theme',value:'Women'},
{name:'By Theme',value:'Young People'}, {name:'By Theme',value:'Leadership'},
{name:'By Theme',value:'Research and Learning'}, {name:'By Theme',value:'Technology'}
]
};
tags.push(program1);
tags.push(program2);
tags.push(program3);
$scope.Program = tags;
//create checkbox filters on the fly
var filters = [];
_.each(tags, function(program){
_.each(program.properties,function(property){
var existingfilter = _.findWhere(filters, { name: property.name });
if(!existingfilter){
var filter = {};
filter.name = property.name;
filter.values = [];
filter.values.push({value: property.value});
filters.push(filter);
}else{
var existingoption = _.findWhere(existingfilter.values, { value: property.value });
if(!existingoption){
existingfilter.values.push({value: property.value});
}
}
});
});
$scope.Filters = filters;
});
filterMod.filter('dynamicFilter', function () {
return function (tags, filterCategories, scope) {
var filtered = [];
var programFilters = _.filter(filterCategories, function(fc) {
return _.any(fc.values, { 'IsIncluded': true });
});
_.each(tags, function(prog) {
var includeProgram = true;
_.each(programFilters, function(filter) {
var props = _.filter(prog.properties, { 'name': filter.name });
if (!_.any(props, function(prog) { return _.any(filter.values, { 'value': prog.value, 'IsIncluded': true }); })){
includeProgram = false;
}
});
if (includeProgram) {
filtered.push(prog);
}
});
return filtered;
};
});
.ng-cloak{
display:none;
}
.topnav{
float:left;
width:400px;
}
.program{
float:left;
width:100px;
height:100px;
margin:20px;
padding:20px;
text-align:center;
background-color:#eee;
}
.sortoptions{
list-style:none;
padding-left:0px;
}
h3{
margin-bottom:0px;
}
ul{
margin-top:2px;
}
<html>
<head>
<meta charset="UTF-8">
<title>MCF Nav Filter</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div ng-app='angularNav' class="ng-cloak" ng-cloak="">
<div ng-controller="angularController">
<h2>Tag Filters</h2>
<div class="topnav">
<div ng-repeat="filter in Filters">
<h3 class="sort">{{filter.name}}</h3>
<ul class="sortoptions">
<li ng-repeat="option in filter.values">
<input type="checkbox" ng-model="option.IsIncluded" ng-checked="option.IsIncluded"> {{option.value}}
</li>
</ul>
</div>
</div>
<div class="programlist">
<div ng-repeat="program in Programs | dynamicFilter:Filters:this" class="program">
{{program.name}}
</div>
</div>
</div>
</div>
<script src='http://ift.tt/1OCtTie'></script>
<script src='http://ift.tt/1MG8NN0'></script>
<script src="js/test.js"></script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire