html - tutorial - manual de navisworks 2018 en español pdf

Casillas de verificación angulares Funcionalidad "Seleccionar todo" con solo una casilla seleccionada inicialmente

Question

Tengo un formulario que contiene 3 casillas de verificación: " Seleccionar todo ", " Opción 1 " y " Opción 2 ".

<form id="selectionForm">
    <input type="checkbox" ng-model="selectAll" >Select all
    <br>
    <input type="checkbox" ng-checked="selectAll" checked>Option 1
    <br>
    <input type="checkbox" ng-checked="selectAll">Option 2
</form>

En la carga de la página inicial quiero que solo se verifique la Opción 1 . Y luego, si se marca la casilla de verificación Seleccionar todo , debería marcar automáticamente la Opción 1 y la Opción 2 para que todas estén seleccionadas.

El problema está en la carga inicial de la página, ng-checked = "selectAll" se evalúa, lo que anula mi intento de verificar inicialmente solo la Opción 1 (selectAll = false inicialmente), por lo que no se selecciona nada.

Este parece ser un problema simple de resolver, pero no puedo encontrar una solución ... ¡Gracias de antemano por cualquier información o consejo!

Answer 1

Me gusta usar ng-repeat para aclarar lo que estás seleccionando / no seleccionando, básicamente, terminas con un objeto pequeño y agradable en el que basarlo todo, y agregarlo es más fácil.

Aquí hay un Plunker

* ¿También te das cuenta de cómo puedes lograr todos los seleccionados? con una función de bucle y no una tonelada de html, y estoy seguro de que esto se puede hacer con menos espaguetis pero funciona *

app.controller(''MainCtrl'', function($scope) {

$scope.allSelected = false;

$scope.checkboxes = [{label: ''Option 1'',checked: true}, {label: ''Option 2''}}}];

$scope.cbChecked = function(){
  $scope.allSelected = true;
  angular.forEach($scope.checkboxes, function(v, k) {
    if(!v.checked){
      $scope.allSelected = false;
    }
  });
}
$scope.toggleAll = function() {
    var bool = true;
    if ($scope.allSelected) {
      bool = false;
    }
    angular.forEach($scope.checkboxes, function(v, k) {
      v.checked = !bool;
      $scope.allSelected = !bool;
      });
   }
});

Answer 2

Otra forma de hacerlo es usar un modelo para las opciones, establecer la selección predeterminada en el modelo y hacer que su controlador maneje la lógica de seleccionar todo.

angular.module("app", []).controller("ctrl", function($scope){
  
  $scope.options = [
    {value:''Option1'', selected:true}, 
    {value:''Option2'', selected:false}
  ];
  
  $scope.toggleAll = function() {
     var toggleStatus = !$scope.isAllSelected;
     angular.forEach($scope.options, function(itm){ itm.selected = toggleStatus; });
   
  }
  
  $scope.optionToggled = function(){
    $scope.isAllSelected = $scope.options.every(function(itm){ return itm.selected; })
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">    </script>
<div ng-app="app" ng-controller="ctrl">
<form id="selectionForm">
    <input type="checkbox" ng-click="toggleAll()" ng-model="isAllSelected">Select all
    <br>
     <div ng-repeat = "option in options">
        <input type="checkbox" ng-model="option.selected" ng-change="optionToggled()">{{option.value}}
     </div>
</form>
  {{options}} 
</div>

Answer 3

Prueba esto:

<form id="selectionForm">
    <input type="checkbox" ng-model="selectAll" >Select all
    <br>
    <input type="checkbox" ng-checked="selectAll || option1" ng-init="option1=true" ng-model="option1">Option 1
    <br>
    <input type="checkbox" ng-checked="selectAll">Option 2
</form>