I am now trying to create a questionnaire table with AngularJS.
I have created a JSON to store the details of cols, rows and sub-rows & I have used the ng-repeat to create the nested table. In the table, there is a number of check-boxes for the user to fill in.
The table looks like this: http://ift.tt/1fxQ8sN
I would like to achieve two goals:
1. Recording & updating a JSON / Array when checkboxes are checked / unchecked.
2. The checkboxes in sub-rows can be checked and the record can be updated from the JSON / Array when the parent checkbox has been checked.
I tried to use ng-model & ng-checked to achieve the goals, however when I checked the parent checkbox, the ng-checked would not update the child checkbox's ng-model.
JSON:
$scope.info = [{
cols:[
{colHeader:"N/A", id:"col01"},
{colHeader:"Disagree", id:"col02"},
{colHeader:"Neutral", id:"col03"},
{colHeader:"Agree", id:"col04"}
],
rows:[
{
id:"row01",
header: "I am happy with this purchase experience",
submenu:[
{header:"I am happy with the product", id:"row01sub01"},
{header:"I am happy with the service", id:"row01sub02"}]
},{
id:"row02",
header: "I will recommend this shop to friends",
submenu: "null"
},{
id:"row03",
header: "I am likely to shop here again",
submenu: "null"
}
]
}];
Directive:
app.directive("feedback", function($rootScope) {
return {
restrict: "E",
templateUrl: "templates/feedbackTable.html",
controller: "mainController",
controllerAs: "mainCtrl"
}
});
Incomplete Table:
<table ng-repeat='module in info'>
<thead>
<tr>
<th></th>
<!--Cols title-->
<th ng-repeat='header in module.cols'>
{{header.colHeader}}
</th>
</tr>
</thead>
<tbody ng-repeat='row in module.rows'>
<tr>
<!--Row Title-->
<td>
<input class='hidden' id='{{row.id}}' type='checkbox', ng-model='selectedRow[row.id]'>
<label for='{{row.id}}'>{{row.header}}</label>
</td>
<!--Checkbox-->
<td ng-repeat='col in module.cols'>
<input class='regular-checkbox' type='checkbox'>
</td>
</tr>
<!--SubMenu-->
<tr class='sub' ng-repeat='subRow in row.submenu track by $index' ng-show='selectedRow[row.id]'>
<td>{{subRow.header}}</td>
<td ng-repeat='subCol in module.cols'>
<input class='regular-checkbox' type='checkbox'>
</td>
</tr>
</tbody>
Thank you!
Aucun commentaire:
Enregistrer un commentaire