Displaying nested JSON data in AngularJS - arrays

Question

I am building a cross platform app using Onsen UI, Monaca and AngularJS.
I have a screen where the user can select from various switches using Onsen UIs built in switches (Switch in List Item). Toggling a switch means that vehicle check needs to be performed, else it is assumed that all checks have passed.
I can display the Check Descriptions (checkitemdesc) as per the JSON below on the list item switches, but when I toggle any of the switches I want to be able to display their related "answers": [{...}] via a modal.
So toggling the "Engine oil level" switch, the user sees a modal with the related checks that can be performed on the "Engine oil level" e.g. Low, top up etc.
JSON example of the data
[{
"fleetcheckitemid": "1",
"checkitemdesc": "Engine oil level",
"answers": [{
"fleetcheckid": "1",
"checkvaluedesc": "Ok"
}, {
"fleetcheckid": "2",
"checkvaluedesc": "Low"
}, {
"fleetcheckid": "3",
"checkvaluedesc": "Top-Up Required"
}]
}, {
"fleetcheckitemid": "2",
"checkitemdesc": "Water level",
"answers": [{
"fleetcheckid": "1",
"checkvaluedesc": "Ok"
}, {
"fleetcheckid": "2",
"checkvaluedesc": "Low"
}, {
"fleetcheckid": "3",
"checkvaluedesc": "Top-Up Required"
}]
}]
My checksController.js used for getting JSON from $http API call which returns a JSON object.
$http.get("http://myfakedomain/api/getfleetchecks.php?fleetid=109").success(function(data)
{
$scope.checkItemDescriptions = data;
});
And my checks.html for displaying switches based on "checkitemdesc" in JSON.
<ul class="list">
<li class="list__item" ng-repeat="checkItemDescription in checkItemDescriptions">
{{checkItemDescription.checkitemdesc}}
<label class="switch switch--list-item">
<input type="checkbox"
class="switch__input"
checked >
<div class="switch__toggle"></div>
</label>
</li>
</ul>
Selecting any of the switches should fire the modal and populate it with the relevant "answers": [{...}] values
modal
<ons-modal var="modal">
<div class="alert-dialog-mask"></div>
<div class="alert-dialog alert-dialog--android">
<div class="alert-dialog-title alert-dialog-title--android">
<div style="text-align: center">Further Details</div>
</div>
<div class="alert-dialog-content alert-dialog-content--android">
<div style="text-align: center; padding-top: 10px; padding-bottom: 15px; padding-left: 10px; padding-right: 10px;">
<p>
Please give further details for<br>
<!-- Display the selected checkitemdesc here - NOT WORKING -->
<strong>{{checkItemDescription[i].checkvaluedesc[i]}}</strong>
</p>
</div>
<!-- Display sub-options for main sections - NOT WORKING-->
<div style="text-align: left; padding-top: 10px; padding-bottom: 15px; padding-left: 10px; padding-right: 10px;">
<!-- Display the selected subitems here - NOT WORKING -->
<label class="checkbox" ng-repeat="checkItemDescription in checkItemDescriptions[i].answers[i].checkvaluedesc">
<input type="checkbox">
<div class="checkbox__checkmark"></div>
<!-- Display the selected subitems here - NOT WORKING -->
{{checkItemDescription[i].answers[i].checkvaluedesc}}
</label>
</div>
</div>
</div>
</ons-modal>
I am able to display the main checks, but how do I do individual checks on each switch and then set the modal values based on that switch?

Answer 1

See this plunker: http://plnkr.co/edit/g952bdedUGuBhC5ez5Im?p=preview
What you do is:
Attach a selected: true/false to the checkitem level as well as the answers level.
Pass the selected row to the modal controller.
Use ng-repeat, using $filter to display the items.
The open modal function:
$scope.openModal = function(items) {
var selectedItems = [];
//get only the selected items
for(var i = 0; i < items.length; i++) {
if(items[i].selected === true) selectedItems.push(items[i]);
}
var modalInstance = $uibModal.open({
templateUrl: 'modalTemplate.html',
controller: MyModalCtrl,
backdrop: 'static',
keyboard: false,
resolve: { //pass selected items to the modal controller
fleetCheckItems: function() {return selectedItems;}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem; //user clicked okay
}, function () {
//user click cancel, figure out something to do with the promise
});
}