mardi 3 mars 2015

Select All checkbox to select nested angular ng-repeat checkboxes?

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