Counter with angular

Question

Counter with angular

Navigation

#1 by (1 votes)

2

Greetings. I have an array

$scope.mesas = [{
      "mesa": "mesa1",
      "integrantes": [{
        "nombre": "Susana Sofia Urrea Sotelo",
        "mesa": "1",
        "entradas": "1",
        "usadas": "0,",
        "done" : false,
      }, {
        "nombre": "Alan Meyer Zaragoza",
        "mesa": "1",
        "entradas": "1",
        "usadas": "0,",
        "done" : false,
      },{
        "nombre": "Karla Irene Urrea Sotelo",
        "mesa": "1",
        "entradas": "1",
        "usadas": "0,",
        "done" : false,
      },{
        "nombre": "Marcus",
        "mesa": "1",
        "entradas": "1",
        "usadas": "0,",
        "done" : false,
      },{
        "nombre": "Nelly Ponce Sotelo",
        "mesa": "1",
        "entradas": "1",
        "usadas": "0,",
        "done" : false,
      },{
        "nombre": "Acompañante",
        "mesa": "1",
        "entradas": "1",
        "usadas": "0,",
        "done" : false,
      },{
        "nombre": "Grecia Magdalena Sotelo Lara",
        "mesa": "1",
        "entradas": "1",
        "usadas": "0,",
        "done" : false,
      },{
        "nombre": "Celso",
        "mesa": "1",
        "entradas": "1",
        "usadas": "0,",
        "done" : false,
      },{
        "nombre": "Paulina Sotelo Medina",
        "mesa": "1",
        "entradas": "1",
        "usadas": "0,",
        "done" : false,
      }, {
        "nombre": "Acompañante",
        "mesa": "1",
        "entradas": "1",
        "usadas": "0,",
        "done" : false,
      }],
    }, ....

And I put the data in the view with jade

div.centralCont-wrapper
        div.centralCont-column 
          h2.centralCont--titulo INVITADOS
          ul.centralCont--list 
            li(ng-repeat="mesa in mesas")
              div(ng-repeat="nombre in mesa.integrantes |  filter:buscar").centralCont-invitado
                div.centralCont-contNombre
                  div.centralCont-nombres 
                    div.aling-left
                      input(type="checkbox" ng-model="nombre.done").checkbox
                      h3.centrarCont--invtNombre {{nombre.nombre}}
                    button(type="button" ng-show="!mesa.visible" ng-click="mesa.visible = true") Mostrar
                    button(type="button" ng-show="mesa.visible" ng-click="mesa.visible = false") Ocultar
                  div.central-cont-mesa
                    p.central-cont--mesa {{nombre.mesa}}
                    p.centralCont--entrada Mesa

What I'm looking for is a counter that shows the number of people there (property name) and that when you click on the checkboxes I go up the example counter Total: 200/12, 200/13 etc etc

javascript html angularjs

asked by Salvador carreon briseño 24.09.2016 в 15:41

source

1 answer

I can not launch an "existing mail" alert Assign a row from one vector to another in c ++

score 1 · Answer 1

To show the total of people it is enough to do an anonymous function that counts the number of members. To count the number of members marked, simply associate an event as ng-click , passing the event to obtain the property checked . It is possible to do it also with ng-change , but we would also have to associate a ng-model and use the integrated function watch .

Note: I have not taken into account the "companions".

angular.module('app', [])
  .controller('assistanceController', ['$scope', ($scope) => {
    $scope.people = 0;
    $scope.markedPeople = 0;
    
    $scope.mesas = [{
      "mesa": "mesa1",
      "integrantes": [{
        "nombre": "Susana Sofia Urrea Sotelo",
        "mesa": "1",
        "entradas": "1",
        "usadas": "0,",
        "done" : false,
      }, {
        "nombre": "Alan Meyer Zaragoza",
        "mesa": "1",
        "entradas": "1",
        "usadas": "0,",
        "done" : false,
      },{
        "nombre": "Karla Irene Urrea Sotelo",
        "mesa": "1",
        "entradas": "1",
        "usadas": "0,",
        "done" : false,
      },{
        "nombre": "Marcus",
        "mesa": "1",
        "entradas": "1",
        "usadas": "0,",
        "done" : false,
      },{
        "nombre": "Nelly Ponce Sotelo",
        "mesa": "1",
        "entradas": "1",
        "usadas": "0,",
        "done" : false,
      },{
        "nombre": "Acompañante",
        "mesa": "1",
        "entradas": "1",
        "usadas": "0,",
        "done" : false,
      },{
        "nombre": "Grecia Magdalena Sotelo Lara",
        "mesa": "1",
        "entradas": "1",
        "usadas": "0,",
        "done" : false,
      },{
        "nombre": "Celso",
        "mesa": "1",
        "entradas": "1",
        "usadas": "0,",
        "done" : false,
      },{
        "nombre": "Paulina Sotelo Medina",
        "mesa": "1",
        "entradas": "1",
        "usadas": "0,",
        "done" : false,
      }, {
        "nombre": "Acompañante",
        "mesa": "1",
        "entradas": "1",
        "usadas": "0,",
        "done" : false,
      }],
    }];
    
    (() => {
      $scope.mesas.forEach(table => {
        table.integrantes.forEach(member => {
          if(member.nombre !== 'Acompañante' && member.nombre) {
            $scope.people++;
          }
        });
      });
    })();
    
    $scope.onMark = (ev) => {
      if(ev.target.checked) {
        $scope.markedPeople++;
      } else {
        $scope.markedPeople--;
      }
    }
  }]);

<!DOCTYPE html>
<html ng-app="app">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <title>JS Bin</title>
</head>
<body ng-controller="assistanceController">
  <label>Total de personas: {{ people }}</label>
  <label>Marcadas: {{markedPeople }}</label>
  
  <table class="table table-bordered table-stripped">
    <thead>
      <tr>
        <th>Messa</th>
        <th>Integrantes</th>
      </tr>
    </thead>
    <tbody>
        <tr ng-repeat="mesa in mesas">
          <td>{{ mesa.mesa }}</td>
          <td>
            <div ng-repeat="member in mesa.integrantes">
              <div ng-hide="member.nombre === 'Acompañante'">
                <input type="checkbox" ng-click="onMark($event)"/>
                <p>{{member.nombre }}</p>
              </div>
            </div>
          </td>
        </tr>
    </tbody>
  </table>
  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
</body>
</html>