samedi 22 août 2015

How to record the input from the ng-repeat generated checkboxes in AngularJS?

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