Change the value of an accumulator when a toggle is true or false

Navigation
0

I would like to know how I can increase and decrease an accumulator, but depending on the status of the toggle (checkbox). I was able to get it to accumulate when both are active but when, I want to put one in false, it does not decrease, but it adds up, and consequently it increases.

I want to know if there is a way, that not only for two toggle but for multiple, recognize when anyone is true or 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--;
        }

    };

}

}

Images

    
asked by Pedro Miguel Pimienta Morales 23.05.2016 в 17:58
source

2 answers

1

You can divide the summation into a function with a different argument, one for each toggle. The place of $scope.Sumatoria() uses $scope.Sumatoria('uno') , $scope.Sumatoria('dos') , etc. Then you use that value to compare against the value of $ scope.elegir [key] since in javascript 

$scope.elegir['uno']

is equivalent to 

$scope.elegir.uno

I'll give you an example 

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>
    
answered by 23.05.2016 / 18:35
source
1

The logic of the if / else within Summation can not work, it will only go to the else when BOTH Booleans are false.

I recommend you use another form. If you only have those two options, you can solve it in the markup directly: 

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

As you see it is a sum, which adds 1 or 0 depending on whether it is true or false.

But this is not very scalable to many options, in that case you can use a function and then implement the logic of the calculation. 

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

This method receives a list of check values from object elejir and calculates how many are true.

    
answered by 23.05.2016 в 18:26
How to download a file uploaded using a form using FileField Help with queues, JAVA