How to use ng-disabled with ng-repeat

0

It is possible to enable a checkbox generated by an ng-repeat, I know that we must take into account the index by the ng-repeat that I am using, as I am doing it active or deactivates all the checkboxes at the same time.

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

In the js inside the controller I have this, the variable idx has the index of the ng-repeat:

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

      $scope.locked = false;

    } 

Best regards

    
asked by Hector Echeverri 22.11.2018 в 13:26
source

3 answers

1

What happens is that you are $scope.locked for all checkboxes. Therefore when you enable or disable all are marked or not.

If you are going to use the ng-repeat you must use a array .

Example:

In your controller declares a variable / model:

$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});

Now in your html view.

Use it in the following way:

<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>

I hope it will guide you.

    
answered by 22.11.2018 в 14:52
0

You yourself hit the nail on the head by stating that every checkbox should have a different id colleague, you just need to implement the problem a little more efficiently.

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>

Here you only assign a different value to each property id - in this case the name of the item -, and then save in ng-model the status of the checkbox ( true / false )

You tell us if it's useful =)

    
answered by 22.11.2018 в 16:26
0

What they say above is correct, within a ng-repeat $scope.locked should be a array , otherwise it happens that they all change at the same time because they are controlled by the same variable.

In your specific example, it would be:

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

and in the code

$scope.locked = [];

if (TIPITV[idx] === "Ok")
{ 
  $scope.locked[idx] = false;
} 
    
answered by 29.11.2018 в 23:56