0

Estoy intentado poner en una página que carga un listado de resultados, con un checkbox cada uno, mostrado con AngularJS, un checkbox que al hacer click, marque todos los checkbox del listado. Para ello, he creado este checkbox así:

<input title="Marcar todos" id="sf_admin_list_batch_checkbox" type="checkbox" onclick="checkAll();" />

Luego recorro la variable que almacenará el Json que llega desde el action (var JsonData)

<tr ng-repeat="item in data">
<input type="checkbox" ng-model="item.checked" class="sf_admin_batch_checkbox">

Por último intento crear una función para que marque todos, pero no logro que funcione:

<script type="text/javascript">
function checkAll()
{

$scope.data = {};

$scope.checkAll = function () {
    if ($scope.selectedAll) {
        $scope.selectedAll = true;
    } else {
        $scope.selectedAll = false;
    }
    angular.forEach($scope.Items, function (item) {
        item.Selected = $scope.selectedAll;
    });
}
}
</script>

El problema es que no sé que poner en el $scope.data

No sé si voy bien encaminado

Un saludo. Gracias

Actualmente tengo el input

<input title="Marcar todos" id="sf_admin_list_batch_checkbox" type="checkbox" onclick="checkAll();" />

y un script que ha dejado de funcionar al modificar el input del bucle

<script type="text/javascript">
function checkAll()

{
  var boxes = document.getElementsByTagName('input'); for(var index = 0; index < boxes.length; index++) { box = boxes[index]; if (box.type == 'checkbox' && box.className == 'sf_admin_batch_checkbox') box.checked = document.getElementById('sf_admin_list_batch_checkbox').checked } return true;
    }
</script>

2 respuestas 2

0

Buenas! Puedes probar de esta forma?

En lugar de onclick vamos a utilizar ng-change para que se ejecute cuando el valor cambie.

HTML

<input title="Marcar todos" id="sf_admin_list_batch_checkbox" 
type="checkbox" ng-model="selectedAll" ng-change="checkAll();" />

Luego, vamos a recorrer nuestra colección y en función del valor de del primer check, vamos a activar o desactivar todos los checks.

CONTROLLER:

$scope.checkAll = function () {
    angular.forEach($scope.data, function (item) {
        item.selected = $scope.selectedAll;
    });
}

Con respecto a tu $scope.data, debería ser la colección a recorrer. ¿Tu lista tendrá algo mas que los checkboxs?

Tu data podría ser perfectamente solo un array de objetos que tengan de valor el Selected

$scope.data = [{selected:false},{selected:false},{selected:false}]

De esta forma te saldrán 3 checks a false.

También puedes a tu colección de objetos añadirle un valor selected

$scope.data = [{id:1, nombre: 'pedro', selected:false},{id:2, nombre: 'luis', 
selected:false},{id:3, nombre: 'marcos', selected:false}]

Si tu colección viene como respuesta a una llamada al servidor, puedes enlazarlo perfectamente sin crear el campo selected, ya que como valor inicial, al no existir será false y cuando actives el check creará el atributo con el valor de true.

Te dejo un ejemplo en codepen

13
  • Lo que pones en "Controller", va dentro de <script>, verdad? Si es así, no funciona Por otro lado, la lista tienen los checkbox para seleccionarlos y poderlos borrar todos de golpe, y un botón de eliminar y editar a la derecha de cada registro
    – Alex
    Commented el 29 sept. 2017 a las 10:19
  • Estas usando angularjs? Es que no veo en tu codigo algo que haga referencia a un controller... y con tu pregunta de ahora me has dejado un poco descolocado. Sin embargo, si que usar ng-repeat en tu codigo html.
    – Naimad
    Commented el 29 sept. 2017 a las 10:21
  • Te he añadido un ejemplo para que veas la estructura completa
    – Naimad
    Commented el 29 sept. 2017 a las 10:28
  • Pues ahora me haces dudar, pero el ng-repeat y todo eso es de Angular. La página es un "partial" llamado _listAngular.php. El bucle y todo eso va en un <div> donde usa la etiqueta php para recuperar ciertas variables como de sesión, etc, y abajo del todo del archivo hay una etiqueta <script type="text/javascript">
    – Alex
    Commented el 29 sept. 2017 a las 10:59
  • Mi listado de registros lo lee de un json
    – Alex
    Commented el 29 sept. 2017 a las 11:06
0

Intenta recorrer cada elemento del array y asignar el modelo del checkbox a false:

angular.module("app",[])
.controller("ctrl", function($scope){
  $scope.model = {};
  $scope.model.items = [{text:"item1", selected : false }, {text:"item2", selected: 2}, {text:"item3", selected: false}, {text:"item4", selected: false}];
  
  $scope.model.checkAll = false;
  
  $scope.model.checkAllItems = function(item) {
     for(var i = 0; i < $scope.model.items.length;i++)
     {
        $scope.model.items[i].selected = $scope.model.checkAll;
     }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">

 <input type="checkbox" ng-model="model.checkAll" ng-change="model.checkAllItems()" /> seleccionar todo
 <ul ng-repeat="item in model.items">
  <li>
    <input type="checkbox" ng-model="item.selected" /> {{item.text}}
  </li>
 </ul>
</div>

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.