0

Quisiera saber como puedo aumentar y disminuir un acumulador, pero dependiendo del estado que este el toggle(checkbox). Pude lograr que acumule cuando los dos están activos pero cuando, quiero poner uno en false, no disminuye, si no que lo suma, y por consecuencia aumenta.

Quiero saber si existe una forma, de que no solo para dos toggle si no para multiples, reconocer cuando cualquiera este true o false.

index.html

<ion-pane>

    <ion-header-bar class="bar bar-header bar-balanced">
        <h1 class="title">Diagnostica</h1>
    </ion-header-bar>

    <ion-content>

        <div ng-controller="diagnosticos">

            <ul class="list-borderless">

                <div class="item item-divider">Sintomas principales</div>

                <li class="item item-toggle">

                    Sintoma 1

                    <label class="toggle toggle-dark">
                  <input type="checkbox" ng-model="elegir.uno" ng-change="Sumatoria()">
                  <div class="track">
                    <div class="handle"></div>
                  </div>
                </label>

                </li>

                <li class="item item-toggle">

                    Sintoma 2

                    <label class="toggle toggle-dark">
                  <input type="checkbox" ng-model="elegir.dos" ng-change="Sumatoria()">
                  <div class="track">
                    <div class="handle"></div>
                  </div>
                </label>

                </li>


            </ul>

            <div class="list-borderless">
                <div class="item item-body">
                    <label>Diagnosticos elegidos</label>
                    <h3 class="title">Principales:{{Resultado}}</h3>
                </div>
            </div>

        </div>

    </ion-content>
</ion-pane>

Diagnostico_1.js

angular.module('saludApp', ['ionic'])
       .controller('diagnosticos', diagnosticos);

diagnosticos.$inject = ['$scope'];

function diagnosticos($scope) {

var SumaDiag;

SumaDiag = 0;
$scope.Resultado = SumaDiag;

$scope.elegir = {};

$scope.Sumatoria = function() {

    if ($scope.elegir.uno === true || $scope.elegir.dos === true) {

        //SumaDiag = SumaDiag + 1
        $scope.Resultado++;

    } else {

        if ($scope.elegir.uno === false || $scope.elegir.dos === false) {
            //SumaDiag = SumaDiag - 1;
            $scope.Resultado--;
        }

    };

}

}

Imagenes Diag1 Diag2 Diag3

2 respuestas 2

1

Puedes dividir la sumatoria en una función con distinto argumento, una para cada toggle. El lugar de $scope.Sumatoria() usa $scope.Sumatoria('uno'), $scope.Sumatoria('dos'), etc. Luego usas ese valor para comparar contra el valor de $scope.elegir[key] ya que en javascript

$scope.elegir['uno'] 

es equivalente de

$scope.elegir.uno

Te dejo un ejemplo

angular.module('saludApp', ['ionic'])
  .controller('diagnosticos', diagnosticos);

diagnosticos.$inject = ['$scope'];

function diagnosticos($scope) {

  var SumaDiag;

  SumaDiag = 0;
  $scope.Resultado = SumaDiag;

  $scope.elegir = {};

  $scope.Sumatoria = function(key) {

    if ($scope.elegir[key] === true) {
      $scope.Resultado++;
    } else {
      $scope.Resultado--;
    };

  }

}
<script src="http://code.ionicframework.com/1.3.1/js/ionic.bundle.min.js"></script>
<link href="http://code.ionicframework.com/1.3.1/css/ionic.min.css" rel="stylesheet">
<div ng-app="saludApp" ng-controller="diagnosticos">
  <ion-header-bar class="bar bar-header bar-balanced">
    <h1 class="title">Diagnostica</h1>
  </ion-header-bar>
  <ion-content>
    <ul class="list-borderless">

      <div class="item item-divider">Sintomas principales</div>

      <li class="item item-toggle">

        Sintoma 1

        <label class="toggle toggle-dark">
          <input type="checkbox" ng-model="elegir.uno" ng-change="Sumatoria('uno')">
          <div class="track">
            <div class="handle"></div>
          </div>
        </label>

      </li>

      <li class="item item-toggle">

        Sintoma 2

        <label class="toggle toggle-dark">
          <input type="checkbox" ng-model="elegir.dos" ng-change="Sumatoria('dos')">
          <div class="track">
            <div class="handle"></div>
          </div>
        </label>

      </li>

      <li class="item item-toggle">

        Sintoma 3

        <label class="toggle toggle-dark">
          <input type="checkbox" ng-model="elegir.tres" ng-change="Sumatoria('tres')">
          <div class="track">
            <div class="handle"></div>
          </div>
        </label>

      </li>

      <li class="item item-toggle">

        Sintoma 2

        <label class="toggle toggle-dark">
          <input type="checkbox" ng-model="elegir.cuatro" ng-change="Sumatoria('cuatro')">
          <div class="track">
            <div class="handle"></div>
          </div>
        </label>

      </li>


    </ul>

    <div class="list-borderless">
      <div class="item item-body">
        <label>Diagnosticos elegidos</label>
        <h3 class="title">Principales:{{Resultado}}</h3>
      </div>
    </div>
  </ion-content>
</div>

3
  • Excelente respuesta, pero como haria, para reconocer el estado o no se como llamarlo, por que la idea no es solo tener, dos, si no que son multiples toggles por paginas. Reconocer cual se le dio click Commented el 23 may. 2016 a las 16:40
  • @PedroMiguelPimientaMorales Ya edité la pregunta, creo que esto se adapta mejor a lo que quieres. Suerte.
    – devconcept
    Commented el 23 may. 2016 a las 16:57
  • Excelente, gracias por la ayuda Commented el 23 may. 2016 a las 17:18
1

La lógica del if/else dentro de Sumatoria no puede funcionar, solo ira al else cuando AMBOS booleanos sean falso.

Te recomiendo que uses otra forma. Si solo tienes esas dos opciones, puedes resolverlo en el markup directamente:

<h3 class="title">Principales:{{(elegir.uno?1:0)+(elegir.dos?1:0)}}</h3>

Como ves es una suma, que suma 1 o 0 dependiendo si esta true o false.

Pero esto no es muy escalable a muchas opciones, en ese caso puedes usar una función y ahí implementar la lógica del calculo.

<h3 class="title">Principales:{{computaPrincipales(['uno','dos'])}}</h3>

JS:

$scope.computaPrincipales = function (lista) {
   // itera sobre la lista
   var contador = 0; 
   angular.forEach(lista, function(item) {
      $scope.elegir[item] === true && (contador++); 
   });
   return contador;
}

Este método recibe una lista de valores verificar del objeto elejir y calcula cuantos son true.

7
  • Muy buena explicacion, algo asi pensaba, pero como haria para el caso que sean multiples toggles por paginas?? Commented el 23 may. 2016 a las 16:34
  • @PedroMiguelPimientaMorales ahí lo edite ;) no lo probe avísame si da algún error. Commented el 23 may. 2016 a las 16:39
  • Aun estoy probando la logica del primero, luego te aviso lo que editaste, gracias Commented el 23 may. 2016 a las 16:44
  • Creo que estoy metiendo la pata, me sale ahora esto, ReferenceError: elegir is not defined Commented el 23 may. 2016 a las 16:47
  • sigue definido esto $scope.elegir = {}; ? Commented el 23 may. 2016 a las 16:49

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.