I need help in selecting\unselecting all checkbox subitems and identifying under which heading what all subitems are selected on click of appy filter button. For debugging purposes I am using filterSelection
to display selected items in html.
Below is my code
$scope.filterSelection=[];
$scope.filterGroup = [{
title: "Agents",
content: ["A1", "A2", "A3", "A4"],
open: true,
checked: true
}, {
title: "Connectors",
content: ["C1", "C2"],
open: false,
checked: false
}];
$scope.applyFilterClick = function($event) {
alert(group);
}
$scope.filterHeaderClick = function(group, $event) {
$event.stopPropagation();
alert(group.title);
console.log($scope.filterGroup.title);
}
$scope.filterSubitemClick = function(group, head, $event) {
$event.stopPropagation();
console.log($scope.filterSelection.length);
var found = false;
for(var i = 0; i < $scope.filterSelection.length; i++) {
if ($scope.filterSelection[i].head == group) {
found = true;
$scope.filterSelection.splice(i, 1);
break;
}
}
if (!found) {
var checkboxSel = {};
checkboxSel[head]=group;
$scope.filterSelection.push(checkboxSel);
}
}
Html
<div style="margin-left:75%;margin-bottom:10px">
<button class="btn" ng-click="searchText = ''">Filter</button>
</div>
<form role="search" class="navbar-form navbar-left">
<div class="form-group">
<input type="text" placeholder="Search" class="form-control" ng-model="searchText">
</div>
</form>
<div class="panel panel-default">
<div class="panel-body">
<div ng-repeat="name in filterSelection" class="selected-item">
{{name}}
</div>
<accordion>
<accordion-group is-open="status.open" ng-repeat="item in filterGroup | filter:searchText">
<accordion-heading>
<input type="checkbox" class="pull-left glyphicon" ng-checked="item.checked" ng-click="filterHeaderClick(item, $event)" value="{{item.title}}"/>{{ item.title }}
<span class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-up': !status.open}"></span>
</accordion-heading>
<div ng-repeat="data in item.content">
<input type="checkbox" class="pull-left glyphicon" ng-checked="item.checked" ng-click="filterSubitemClick(data, item.title, $event)" value="{{data}}" />{{data}}
</div>
</accordion-group>
</accordion>
<div class="pull-right">
<button type="button" class="btn btn-default btn-xs" ng-click="applyFilterClick($event)">Apply Filter</button>
</div>
</div>
</div>
At present it is only able to add to the list filterSelection
whichever item is clicked, need help in having all items selected for each header item. In above image when I click on A4
and object is added in filterSelection
stating header item and it's subitem which is selected, need help with similar or same thing to identify both selected header and subitem(s).
Update
I am able to get all checked items and recognize its header checkbox now. Inside filterSubitemClick
function changed if ($scope.filterSelection[i][head] == group) {
statement. Need help in selecting all items for selected header and expand accordion tab.