One challenge I'm facing is with the object named '$scope.filter'. It has a nested structure like this:
I am trying to figure out how to retrieve the name of the nested object (key in this case) using a directive. Ideally, I would like to achieve this without involving the controller, but if it's not feasible, then I will consider using the controller.
<ul>
<span ng-repeat="x in filter">
<span ng-repeat="(key,val) in x">
<span ng-if="x[key]">/*need to extract values of checked checkboxes here HOW ?*/ </span>
</span>
</span>
</ul>
This section showcases how checkboxes are created:
<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>
Snippet of the 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) {
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) ;
};