Use ng-model to mark the value of checkboxes ANGULAR.JS

Question

I have a series of checkboxes that I'm dynamically creating with an ng-repeat. I want each checkbox to be marked depending on the value true or false. But I can not get one to be marked, and in addition when one is marked, the others are marked. What am I doing wrong?

  <div ng-controller="Ctrl">
    <div class="wrapper">
      <div class="container-fluid">
          <table border='1'>
            <tr>
              <th rowspan="3">Tipo de Contenido</th>
              <th colspan="{{aTipoUsuarios.length * 3}}">
                Tipo de Usuarios
              </th>
            </tr>
            <tr>
             <td ng-repeat="usu in aTipoUsuarios" colspan="3">
              {{usu}}
             </td>
            </tr>
            <tr>
              <td ng-repeat-start="usu in aTipoUsuarios" ><i class='glyphicon glyphicon-book' tile='Permiso de Lectura'></i></td>
              <td ><i class='glyphicon glyphicon-pencil' tile='Permiso de Escritura'></i></td>
              <td ng-repeat-end><i class='glyphicon glyphicon-trash' tile='Permiso de Eliminación'></i></td>
            </tr>
            <tr>
            <tr ng-repeat="rol in aRoles">
             <td>{{rol.tipo_contenido}}</td>
             <td ng-repeat-start='check in rol.tipo_usuario'>
              <input type="checkbox" ng-model='rol.lectura' class="form-control">
            </td>
             <td>
              <input type="checkbox" ng-model='rol.escritura' class="form-control">
            </td>
             <td ng-repeat-end>
              <input type="checkbox" ng-model='rol.eliminacion' class="form-control">
            </td>
            </tr>
          </table>
      </div>
   </div>
  </div>

 $scope.aRoles=
     [
       {
         "tipo_contenido": "articulos", 
         "tipo_usuario":{
          "administrador":
           {"escritura":true, "lectura":true, "eliminacion":true},
          "reportante":
           {"escritura":true, "lectura":false, "eliminacion":true}
         }     
       },
       {
         "tipo_contenido": "informacion", 
         "tipo_usuario":{
          "administrador":
           {"escritura":true, "lectura":false, "eliminacion":true},
          "reportante":
           {"escritura":false, "lectura":true, "eliminacion":false}
         }     
       },
     ]        
    $scope.aTipoUsuarios=Object.keys($scope.aRoles[0].tipo_usuario);

casraf · Accepted Answer · 2017-02-13 14:43:02Z

1

Your ng-model definition is always pointing to the same object.

<input type="checkbox" ng-model='rol.lectura' class="form-control">

Since you have check in your repeater that actually loops in the correct spot, you should just replace rol with check to get the correct reference:

<input type="checkbox" ng-model='check.lectura' class="form-control">

Here's your fixed fiddle

edited Feb 13, 2017 at 14:43

answered Feb 13, 2017 at 14:08

casraf

21.8k10 gold badges60 silver badges93 bronze badges

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

Collectives™ on Stack Overflow

Use ng-model to mark the value of checkboxes ANGULAR.JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related