I'm stuck with some concept while realizing checkbox system.
I've got an array of objects, it looks like this:
this.columnsGroups = [
{
id: 1,
title: 'General requests',
props: [
{
title: 'Search level',
filterType: 'entry',
visible: undefined
},
{
title: 'ID',
filterType: 'number',
visible: undefined
}
]
},
{
id: 2,
title: 'Technical Requests',
props: [
{
title: 'Search level',
filterType: 'entry',
visible: undefined
},
{
title: 'ID',
filterType: 'number',
visible: undefined
}
]
},
{
id: 3,
title: 'Popular requests',
props: [
{
title: 'Search level',
filterType: 'entry',
visible: undefined
},
{
title: 'ID',
filterType: 'number',
visible: undefined
}
]
},
{
id: 4,
title: 'Misc requests',
props: [
{
title: 'Search level',
filterType: 'entry',
visible: undefined
},
{
title: 'ID',
filterType: 'number',
visible: undefined
}
]
}
]
What I'm trying to do is to parse this array into html template with checkboxes. The structure of the template consists of: parent checkbox
<div class="ln-select-columns-content" ng-if="currentTab.isAdvancedSearch" ng-repeat="group in ctrl.columnsGroups" ng-style="{'width':'25%'}">
<div class="ln-select-column-row">
<label>
<span class="ln-checkbox">
<input type="checkbox" ng-model="allChecked" ng-checked="allSelected" ng-click="ctrl.toggleSelectAllAttributes()"/>
<span class="ln-bg"></span>
</span>
<div class="ln-select-column-name"><b>:</b></div>
</label>
<div ng-repeat="column in group.props" class="ln-select-column-row">
<label>
<span class="ln-checkbox">
<input type="checkbox" ng-model="column.visible" />
<span class="ln-bg"></span>
</span>
<span class="ln-select-column-name"></span>
</label>
</div>
</div>
</div>
Literally, the template view looks like this: view screenshot
Now, the problem is: when I'm writing a realisation for checkboxing all the child checkboxes with parent checkbox for each column, ng-model=allChecked
checks all the child checkboxes from any parent checkbox in the container.
What would be the best way to do parent checkboxing, isolated from the sibling parent checkboxes? Or maybe the array of objects is not correctly structured?
Aucun commentaire:
Enregistrer un commentaire