Quiero hacer una app que muestre los nombres de todas las mesas (eso ya lo tengo) y que al darle click a uno de esos nombres, muestre solo los nombres de de esa mesa. He intentado de todo y no logro hacerlo.
El objeto es el siguiente
{
"mesas": [
{
"mesa": "mesa1",
"integrantes": [
{
"nombre": "Salvador Carreon",
"mesa" : "1",
"entradas" : "3",
"usadas" : "0,"
},
{
"nombre": "Ernesto Perez",
"mesa" : "1",
"entradas" : "2",
"usadas" : "0,"
},
{
"nombre": "Pepe el toro",
"mesa" : "1",
"entradas" : "1",
"usadas" : "0,"
}
],
},
{
"mesa": "mesa2",
"integrantes": [
{
"nombre": "Daniel Garcia",
"mesa" : "2",
"entradas" : "3",
"usadas" : "0,"
},
{
"nombre": "Oscar Gaytan",
"mesa" : "2",
"entradas" : "2",
"usadas" : "0,"
},
{
"nombre": "Juan de Diosmes",
"mesa" : "2",
"entradas" : "1",
"usadas" : "0,"
}
]
}
]
}
Esta es la manera como intente obtener esos datos.
$http({method: 'GET', url: 'data/list.json'}).success(function(data) {
$scope.mesas = [];
angular.forEach(data.mesas, function(value, key) {
$scope.mesas.push(value);
});
$scope.integrantes = [];
angular.forEach(data.mesas, function(inviNames){
angular.forEach(inviNames.integrantes, function(names){
$scope.integrantes.push(names);
})
});
});
Y los intente mostrar de esta forma.
<ul class="centralCont">
<li ng-repeat="name in integrantes" class="centralCont">
{{ name.nombre }}
</li>
</ul>
Oh! Esta genial tu respuesta, me ayudo mucho, solo algo que creo que no me explique bien.
En un lado tengo desplegado todos los nombres de todas las mesas junto con algunos datos mas, como el numero de la mesa y contador:
ul.centralCont--list
li(ng-repeat-start="mesa in mesas")
li(ng-repeat-end, ng-repeat="nombre in mesa.integrantes | filter:buscar").centralCont-invitado
div.centralCont-contNombre
div.centralCont-nombres
h3(ng-click="verMesa()").centrarCont--invtNombre {{nombre.nombre}}
div.central-cont-mesa
p.central-cont--mesa {{nombre.mesa}}
p.centralCont--entrada Mesa
div(ng-click="contador()", ng-init="count=0").centralCont--counter
p.counter--numA {{count}}
p.counter--diagonal /
p.counter--numB {{ nombre.entradas }}
Lo que busco hacer, es que al hacerle click a uno de los nombres o al numero de la mesa, se muestre en otra parte todos los nombres de los integrantes de esa mesa
h2.centralCont--titulo INFORMACIÓN DE LA MESA
div.centralCont-invitado
ul.centralCont--list
li(ng-repeat-start="mesa in mesas")
li(ng-repeat-end, ng-repeat="nombre in mesa.integrantes").centralCont--element {{nombre.nombre}}