0

I have html code, which displays content in grid format, that is a row with three columns each, and each input field would be able to check. However, i am not able to check multiple checkboxes with below code. Whatever checkbox i choose, only the first box in the list is triggered and checked. Others remain ng-prestine. What would be the issue with my code 

 <table>
     <tr ng-repeat="(key, allergyList) in  filteredAllergies track by $index">
         <td ng-repeat="allergy in allergyList track by $index">
             <div class="ice-form-checkbox">
                 <input id="condition" ng-model="selectedAllergy" type="checkbox"/><label for="condition"><span>{{allergy.allergyName}}</span></label>
             </div>
         </td>
     </tr>
 </table>
Barmar
  • 741,623
  • 53
  • 500
  • 612
nikitha
  • 179
  • 1
  • 1
  • 15
  • 1
    Do they all have the same id? – Darren S Nov 12 '15 at 21:36
  • 1
    You are using `ng-repeat` and then have a fixed `ID` on your `input` so, every `input` allergy in allergyList will have `id="condition"` which is incorrect syntactically – Adjit Nov 12 '15 at 21:38
  • What do you mean by "only the first box is triggered and checked". Visually, the right check boxes are checked, but maybe you expect a particular value to end up in selectedAllergy? – www.admiraalit.nl Nov 12 '15 at 21:47

3 Answers3

1

You are giving only one single variable as a model to the checkboxes. You should atribute an array, like this: (Run the Code Snippet to see it working)

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.options =         
    [
     [{id: 1}, {id: 2}, {id: 3}],
        [{id: 4}, {id: 5}, {id: 6}],
        [{id: 9}, {id: 8}, {id: 9}]
    ];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <table>
    <tr ng-repeat="row in options">
      <td ng-repeat="item in row">
        <p>Op {{item.id}}</p>
        <input ng-model="item.value" type="checkbox" />
      </td>
    </tr>
  </table>

  <div ng-repeat="row in options">{{row}}
    <br>
  </div>
</div>
Italo Ayres
  • 2,603
  • 2
  • 16
  • 20
0

The model, selectedAllergy, exists in the main scope. Set it to "allergy.selected".

Chet
  • 3,461
  • 1
  • 19
  • 24
-1

You are using ng-repeat and then have a fixed ID on your input so, every input allergy in allergyList will have id="condition" which is incorrect HTML

This may be causing the effect of only being able to select one checkbox. Try changing it to a class and see what happens.

Adjit
  • 10,134
  • 12
  • 53
  • 98