AngularJS: Repeating and getting values from checkbox in table

Question

I have an object named studentData which has a number of attributes. I have a table corresponding to a certain number of questions. What I intend to do is, for each student, check the value of question number which is correct and push into studentData.correctQuestionNumbers which is an array. However, the checkboxes don't seem to repeat.

View:

<table class="flat-table flat-table-3">
    <tr>
        <th>Student Name</th>
        <th ng-repeat="questionNumber in questionNumbers">{{ questionNumber }}</th>         
    </tr>
    <tr ng-repeat="student in studentData">
        <td>{{ student.name }}</td>
        <td ng-repeat="questionNumber in questionNumbers"><input type="checkbox" ng-model="student.correctQuestionNumbers[]"></td>
    </tr>
</table>

Controller:

$scope.questionNumbers = [1, 2, 3, 4, 5]
    $scope.correctQuestionNumbers = [];

$scope.selectStudents = [{batch:'A1', name: 'ABC'}, {batch:'A2', name: 'XYZ'}];

$scope.studentData = [];
for(var i = 0; i < $scope.selectedStudents.length; i++){
  $scope.studentData.push({name: $scope.selectedStudents[i].name, 
    batch: $scope.selectedStudents[i].batch, 
    correctQuestionNumbers: $scope.correctQuestionNumbers});
}

HARI · Accepted Answer · 2017-07-02 04:43:39Z

1

Try the following code:

Controller:

$scope.questionNumbers = [1, 2, 3, 4, 5]
$scope.selectedStudents = [{batch:'A1', name: 'ABC'}, {batch:'A2', name: 'XYZ'}];

$scope.studentData = [];
for(var i = 0; i < $scope.selectedStudents.length; i++){
  $scope.studentData.push({name: $scope.selectedStudents[i].name, 
    batch: $scope.selectedStudents[i].batch, 
    correctQuestionNumbers: []});
}

View:

<table class="flat-table flat-table-3">
  <tr>
    <th>Student Name</th>
    <th ng-repeat="questionNumber in questionNumbers">{{ questionNumber }}</th>         
  </tr>
  <tr ng-repeat="student in studentData">
    <td>{{ student.name }}</td>
    <td ng-repeat="questionNumber in questionNumbers"><input type="checkbox" ng-model="student.correctQuestionNumbers[$index]"></td>
  </tr>
</table>

answered Jul 2, 2017 at 4:43

HARI

4063 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Akhilesh Chobey Over a year ago

Thank you so much. Could you please tell why this works?

Akhilesh Chobey Over a year ago

But @HARI I cant update the correctQuestionNumbers of both students differenty. It seems they are both same everytime.

HARI Over a year ago

is the check box is checked for both students ?

Akhilesh Chobey Over a year ago

Yes, when I click for one it gets updated for both for same values. But I intend to change it differently for different students. The students wont have same question numbers correct.

HARI Over a year ago

did you modified your controller correctQuestionNumbers: [] while pushing student data $scope.studentData.push

|

Collectives™ on Stack Overflow

AngularJS: Repeating and getting values from checkbox in table

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related