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 considerado "acompañante" como integrante válido.
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">
<input type="checkbox" ng-click="onMark($event)"/>
<p>{{member.nombre }}</p>
</div>
</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
</body>
</html>