Tengo un bucle que entrega una colección de casillas de verificación que responden como se espera de forma predeterminada. Ahora necesito limitar el máximo que se puede marcar a 8 (y conservar el número completo de casillas de verificación).

Estoy tratando de agregar ng-model (e intenté ng-if) a la clase como se muestra a continuación, pero el comportamiento es incorrecto.

Html

<div class="col-xs-12 col-sm-4 " ng-hide="vm.resultCount === 0" ng-repeat="np in vm.corporations">
  <div class="Checkbox">
    <input type="checkbox" ng-click="vm.updateCart(np)"/>
      <div class="Checkbox-visible" model="!vm.overEightCorporations">

Css

> input:checked + .Checkbox-visible {
    background: #000 url('../images/CheckMark_White.png') center/20px 20px no-repeat;
}

> input:focus + .Checkbox-visible {
}

Js

vm.overEightCorporations = function () {

        if ($rootScope.cart.length > 7){
            return true;
            toastr.error('You can only set 8 corporations at a time.');
        }
        return false;
        }
    };

Editar:

JS adicionales después de las respuestas

       vm.updateCart = function (corporation) {

            var i = vm.inCart(corporation.id);
            if (i < 0) {
                $rootScope.cart.push(corporation);
            } else {
                $rootScope.cart.splice(i, 1);
            }

    };
0
Allen 16 ene. 2018 a las 17:58

3 respuestas

La mejor respuesta

Se resolvió agregando un bool "marcado" a mi objeto de datos. Tuve que agregar un objeto en la instanciación y luego modificarlo en varios lugares a lo largo del código para mantenerlo actualizado. Los problemas persistieron hasta que actualicé ng-click a ng-change, que aparentemente funciona mejor con ng-model. Luego configuro la presencia de la marca de verificación simplemente a través del bool marcado:

 <input type="checkbox" ng-change="vm.updateCart(np)" ng-model="np.checked"/>
0
Allen 16 ene. 2018 a las 18:56

Como escribí en los comentarios, debes hacer algo similar:

  vm.updateCart = function (corporation) {
        var i = vm.inCart(corporation.id);
        if (i < 0) {
            $rootScope.cart.push(corporation);
        } else {
            $rootScope.cart.splice(i, 1);
        }

        // if you want to show error message you can do it here
        vm.overEightCorporations = $rootScope.cart.length > 7;

};

Html:

<div class="col-xs-12 col-sm-4 " ng-hide="vm.resultCount === 0" ng-repeat="np in vm.corporations">
  <div class="Checkbox">
    <input type="checkbox" ng-click="vm.updateCart(np)" ng-class="{ 'checkbox-invisible': vm.overEightCorporations }"/>
      <div class="Checkbox-visible">

Css:

input[type="checkbox"]:not(:checked) + .checkbox-invisible {
     display:none;
}
0
Iaroslav 16 ene. 2018 a las 16:11

Simplemente puede limitar la producción de su ng-repeat s según el valor deseado.

<div class="col-xs-12 col-sm-4 " ng-hide="vm.resultCount === 0" ng-repeat="np in vm.corporations | limitTo: 8">
  ...
</div>
0
Aer0 16 ene. 2018 a las 15:08
48284088