2

Saludos. Tengo un 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,
      }],
    }, ....

Y muesto los datos en la vista con 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 

Lo que busco hacer es un contador que muestre la cantidad de personas que hay (propiedad nombre) y que cuando se le de click en los checkbox vaya subiento el contador ejemplo Total: 200 / 12, 200 / 13 etc etc

3
  • ¿La cantidad de personas que existen o las que marcas?
    – gugadev
    el 24 sep. 2016 a las 14:15
  • la cantidad de personas que existen el 24 sep. 2016 a las 14:40
  • Bueno ambas, las que son y las que vas marcando el 24 sep. 2016 a las 14:53

1 respuesta 1

2

Para mostrar el total de personas basta con hacer una función anónima que cuenten el número de integrantes. Para contar la cantidad de integrantes marcados, basta con asociar un evento como ng-click, pasándole el evento para obtener la propiedad checked. Es posible hacerlo también con ng-change, pero tendríamos que asociar también un ng-model y usar la función integrada watch.

Nota: No he tenido en cuenta a los "acompañantes".

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>

2
  • Perfecto, exactamente asi, muchas gracias el 24 sep. 2016 a las 15:21
  • 1
    De nada. Si te sirvió mi respuesta, márcala como correcta :)
    – gugadev
    el 24 sep. 2016 a las 15:23

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.