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