I have a series of nested ng-repeat checkboxes, where it's a structure like:
- Checkbox
- country
- country
- select all
- Checkbox
- country
- country
- select all
The "select all" in each group should select all "country" checkboxes in that group.
You can see it in action here: http://ift.tt/18JB1Ki
The inner checkboxes are generated by an array in the main json:
$scope.carriers =
[{
"name": "UPS",
"selected": false,
"hasPaymentOptions": false,
"isSelectable": true,
"value": "",
"countries": [
"USA","UK","Canada","Germany","Australia"
]
},etc
And are in a nested ng-repeat:
<!-- main list of carrier checkboxes -->
<div ng-repeat="c in partnerent.carriers.carriers" class="spacer-top-md spacer-bottom-md">
<div class="carrier spacer-bottom-sm">
<div class="checkbox-inline">
<label>
<input type="checkbox" name="{{c.name | slug}}" ng-model="c.selected"> {{c.name}}
</label>
</div>
<!-- inner checkboxes for countries -->
<ul class="entitlement-countries list-inline">
<li ng-repeat="ec in c.countries">
<div class="checkbox-inline">
<label>
<input type="checkbox" name="{{ec | slug}}"> {{ec}}
</label>
</div>
</li>
<li ng-if="c.countries.length > 0">
<div class="checkbox-inline">
<label>
<input type="checkbox" name="{{ec | slug}}_selectall"> Select all
</label>
</div>
</li>
</ul>
It all works, but my question is how to have those "select all" checkboxes select their group of countries? Most of the solutions and directives I've found involve the model and are generally for one group of checkboxes, where I have several inside a ng-repeat.
Aucun commentaire:
Enregistrer un commentaire