i have object called '$scope.filter' looks this:
how name of nested object i.e key in case? preferably using directive without involving controller if not possible without it.
<ul> <span ng-repeat="x in filter"> <span ng-repeat="(key,val) in x"> <span ng-if="x[key]">/*get values of checked checkboxes here how ?*/ </span> </span> </span> </ul> here creating checkboxes:
<ul ng-repeat="(key,value) in filtered=(properties | filter: filterbycategory | groupby: 'name') "> <li>group name: <strong>{{ key }}</strong></li> <div ng-repeat="prop in value"> <label> <input type="checkbox" ng-model="filter[key][$index]"> <span>{{prop.property}}</span> </label> </div> </ul> controller code:
.controller('datacontroller', function($scope, $filter) { $scope.properties = [ {name: 'weight', property: 'quintal', value:'50'}, { name: 'quantity', property: 'litre' , value:'40'}, { name: 'quantity', property: 'ml' , value:'10'}, { name: 'height', property: 'metres' , value:'10' }, { name: 'height', property: 'cm' , value:'20'}, {name: 'height', property: 'inches' , value:'30'}, { name: 'size', property: 'fat' , value:'28' }, { name: 'size',property: 'slim', value:'48' }, { name: 'feature', property: 'sharp' , value:'9'}, { name: 'feature', property: 'bland', value:'2' }, {name: 'weight', property: 'kg', value:'10'}, { name: 'weight', property: 'grams', value:'20' }, { name: 'weight', property: 'ton' , value:'30'} ]; $scope.filter = {}; $scope.filterbycategory = function (prop) { // console.log($scope.filter); angular.foreach($scope.filter, function(item){ for(key in item) { if(item[key]) return; else console.log("show"); $scope.filter={}; } }); return $scope.filter[prop.name] || nofilter($scope.filter) ; };
i modified structure bit since format complicated work when comes binding:
$scope.filter = [ { id: 1, groupname: 'feature', options: [ {id: 1, selected: false }, {id: 2, selected: false } ], }, { id: 2, groupname: 'weight', options: [ {id: 4, selected: false }, {id: 5, selected: false } ], }, ]; then use function in template name of each option this:
$scope.getname = function(group, option) { var options = []; (var = 0; < $scope.properties.length; i++){ if ($scope.properties[i].name === group.groupname){ options.push($scope.properties[i].property); } }; return options[group.options.indexof(option)]; }; if want selected options nested list use custom filter return required data flattened in 1 list. there include custom logic required produce desired result.
code example:
app.filter('groupfilter', function() { return function(filterlist, properties) { var selectedoptions = []; // iterate groups (var = 0; < filterlist.length; i++){ var group = filterlist[i]; // names properties var optionnames = []; (var k = 0; k < properties.length; k++){ if (properties[k].name === group.groupname){ optionnames.push(properties[k].property); } }; // find selected options in group (var j = 0; j < group.options.length; j++){ var option = group.options[j]; if (option.selected){ selectedoptions.push(group.groupname + ' - ' + optionnames[j]); } } } return selectedoptions; } }); and coresponding html:
<li ng-repeat="option in filter | groupfilter:properties">{{option}}</li>
you can see both in sample below:
var app = angular.module('app', []); app.filter('groupfilter', function() { return function(filterlist, properties) { var selectedoptions = []; // iterate groups (var = 0; < filterlist.length; i++){ var group = filterlist[i]; // names properties var optionnames = []; (var k = 0; k < properties.length; k++){ if (properties[k].name === group.groupname){ optionnames.push(properties[k].property); } }; // find selected options in group (var j = 0; j < group.options.length; j++){ var option = group.options[j]; if (option.selected){ selectedoptions.push(group.groupname + ' - ' + optionnames[j]); } } } return selectedoptions; } }); app.controller('ctrl',function($scope) { $scope.filter = [ { id: 1, groupname: 'feature', options: [ {id: 1, selected: false }, {id: 2, selected: false } ], }, { id: 2, groupname: 'weight', options: [ {id: 4, selected: false }, {id: 5, selected: false } ], }, ]; $scope.getname = function(group, option) { var options = []; (var = 0; < $scope.properties.length; i++){ if ($scope.properties[i].name === group.groupname){ options.push($scope.properties[i].property); } }; return options[group.options.indexof(option)]; }; $scope.properties = [ { name: 'weight', property: 'quintal', value:'50'}, { name: 'quantity', property: 'litre' , value:'40'}, { name: 'quantity', property: 'ml' , value:'10'}, { name: 'height', property: 'metres' , value:'10' }, { name: 'height', property: 'cm' , value:'20'}, { name: 'height', property: 'inches' , value:'30'}, { name: 'size', property: 'fat' , value:'28' }, { name: 'size',property: 'slim', value:'48' }, { name: 'feature', property: 'sharp' , value:'9'}, { name: 'feature', property: 'bland', value:'2' }, { name: 'weight', property: 'kg', value:'10'}, { name: 'weight', property: 'grams', value:'20' }, { name: 'weight', property: 'ton' , value:'30'} ]; });<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="ctrl"> filter: <ul> <li ng-repeat="grp in filter track grp.id"> {{grp.groupname}} <ul> <li ng-repeat="option in grp.options track option.id"> <label for="check{{option.id}}"> <input type="checkbox" ng-model="option.selected" id=check{{option.id}}> {{getname(grp, option)}} </label> </li> </ul> selected: <span ng-repeat="selectedoption in grp.options | filter:{selected:true} track selectedoption.id"> {{getname(grp, selectedoption)}} </span> <li> </ul> <label> selected: <ul> <li ng-repeat="option in filter | groupfilter:properties">{{option}}</li> </ul> </label> </div>
Comments
Post a Comment