In my Angular application, I have a list of checkboxes that are dynamically generated using nested ng-repeat:
<div ng-repeat="type in boundaryPartners">
<div class="row" ng-show="showBPtype[$index]">
<div class="col-xs-12">
<div ng-repeat="partner in type.partners">
<label class="checkbox-inline">
<input type="checkbox"
value="partner.id"
ng-model="partner.selected"
ng-change="changeValue(partner)"
/>
<p><span ></span>{{partner.name}}<p>
</label>
</div>
</div>
</div>
</div>
The data structure for this list is as follows (sample included):
{
"id": 1,
"name": "Civil Society Organizations",
"partners": [{
"id": 1,
"name": "Youth Association"
}, {
"id": 2,
"name": "Rwanda Network"
}, {
"id": 3,
"name": "Communité du Rwanda"
}]
},
{
"id": 2,
"name": "Educational Organizations",
"partners": [{
"id": 16,
"name": "SchoolA"
}, {
"id": 17,
"name": "SchoolB"
}]
}
This array consists of partner types, each containing a list of partners within the "partners" array.
The functionality allows users to select partners through checkboxes and add them to a nested list of selected partners. A similar process removes partners when they are deselected.
A working solution has been provided by user Artyom Pranovich here.
To populate the nested list with selected partners based on the described interface, modifications need to be made to adapt the existing code.
The final list structure where selected partners will be added resembles the following:
[
{
"id": 1,
"entities": [
{
"id": 2,
"name": "Entity 2"
},
{
"id": 3,
"name": "Entity 3"
}
]
},
{
"id": 2,
"entities": [
{
"id": 2,
"name": "Entity 2"
}
]
}
]
Within the application, this list is referred to as
$scope.report.participatingPartners