0

Es posible habilitar un checkbox generado por un ng-repeat, sé que debemos tener en cuenta el índice por el ng-repeat que estoy usando, como lo estoy haciendo activa o desactiva todos los checkbox al mismo tiempo.

 <input ng-model="data.acepta"
        class="flipswitch"
        name="acepta"
        style="width:50px"
        id="acepta"
        ng-disabled= "locked"
        type="checkbox"
        >

En el js dentro del controlador tengo esto, la variable idx tiene el index del ng-repeat:

    if(TIPITV[idx]=="Ok")
    { 

      $scope.locked = false;

    } 

Saludos cordiales

3 respuestas 3

1

Lo que sucede es que estás $scope.locked para todos los checkboxs. Por ello cuando habilitas o deshabilitas todos se marcan o no.

Si vas a usar el ng-repeat debes usar un array.

Ejemplo:

En tu controlador declara una variable/modelo:

$scope.items = [];
$scope.items.push({id: 1, name: 'Nombre 1', check: true});
$scope.items.push({id: 2, name: 'Nombre 2', check: false});
$scope.items.push({id: 3, name: 'Nombre 3', check: true});

Ahora en tu vista html.

Usalo de la siguiente forma:

<div ng-repeat="item in items">
  <input type="checkbox" ng-model="item.check" /> {{item.name}}
</div>

<!-- Con este código puedes ver como se modifica el atributo "check" de cada elemento por separado. -->
<pre>{{items|json}}</pre>

Espero te sirva de guía.

0

Tú mismo diste en el clavo al indicar que cada checkbox debe tener un id diferente colega, sólo te falta implementar de forma un poco más eficiente el problema.

var app = angular.module('App', []);
app.controller('ctrl', ['$scope', function($scope){
  $scope.data = [
    { nombre: 'Gokú', raza: 'Saiyayin', casado: true },
    { nombre: 'Picolo', raza: 'Namek', casado: false },
    { nombre: 'Vegeta', raza: 'Saiyayin', casado: true }
  ]
  
  $scope.selection = function(item){
    if(item.checked)
      alert('Seleccionaste a ' + item.nombre);
  }
}])
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="container" ng-app="App" ng-controller="ctrl">
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Nombre</th>
        <th>Raza</th>
        <th>Comprometido</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="row in data">
        <td ng-bind="row.nombre"></td>
        <td ng-bind="row.raza"></td>
        <td><i class="fa fa-2x" ng-class="row.casado ? 'fa-check text-success' : 'fa-times text-danger'"></i></td>
        <td>
          <div>
            <label>
              <input type="checkbox" id="{{row.nombre}}" ng-model="data[$index].checked" ng-change="selection(row)">
              <span></span>
            </label>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

Acá solamente le asigne un valor diferente a cada propiedad id - en este caso el nombre del item -, y posteriormente guardo en el ng-model el estado del checkbox (true/false)

Nos comentas si te sirve =)

1
  • Buenas tardes Gracias a todos por su ayuda, finalmente lo logre realizar así: En el select agregué un ng-change="function(data,$index)" y en el js cambio el estado del check con la función que defini usando elemento[index].click(); el 3 dic. 2018 a las 21:30
0

Lo que dicen arriba es correcto, dentro de un ng-repeat $scope.locked debería ser un array, de otro modo sucede que todos cambian a la vez por que están controlados por la misma variable.

En tu ejemplo puntual seria:

<input ng-model="data.acepta"
       class="flipswitch"
       name="acepta"
       style="width:50px"
       id="acepta"
       ng-disabled="locked[$index]"
       type="checkbox"
       >

y en el codigo

$scope.locked = [];

if (TIPITV[idx] === "Ok")
{ 
  $scope.locked[idx] = false;
} 

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.