dimanche 7 mai 2017

Nested ng-repeat doesn't work for multiple checkboxes

When I used ng-repeat on my nested checkboxes, it doesn't work when I click the button. Without ng-repeat, I duplicate the checkboxes, and it is working fine.

Nested ng-repeat

div(ng-repeat="m in mc.meals")
  input(type='checkbox',
              name='m.id',
              id="m.id",
              ng-checked='isAdditionalMealSelected(m.id)', 
              ng-change="additionalMealChanged(m.id)", 
              ng-model="additionalMealSelected[m.id]")
  label(for='m.id')
          span.checkbox.primary.primary
            span
          |  - MYR 

When one of the checkbox is clicked, it doesn't check. The checkbox will works if only if ng-model="additionalMealSelected[0]". m.id doesn't work properly here.

Without ng-repeat

form
  div
    input(type='checkbox',
          name='0',
          id="0", 
          ng-checked='isAdditionalMealSelected(0)', 
          ng-change="additionalMealChanged(0)", 
          ng-model="additionalMealSelected[0]")

    label(for='0')
          span.checkbox.primary.primary
            span
          | Name
  div
    input(type='checkbox',
          name='1',
          id="1",
          ng-click="selectAdditional(1)"
          ng-checked='isAdditionalMealSelected(1)', 
          ng-change="additionalMealChanged(1)", 
          ng-model="additionalMealSelected[1]")

    label(for='1')
          span.checkbox.primary.primary
            span
          | Name2

Everything works fine

Controller

$scope.additionalMealSelected = [];




Aucun commentaire:

Enregistrer un commentaire