1

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}}
3
  • 1
    Puedes colocar el código que has usado para mostrar el objeto de la mesa. Commented el 14 sept. 2016 a las 16:02
  • 1
    muéstranos algo de eso que haz intentando. Es mucho mas probable de obtener una buena respuesta si hay un punto de partida. Saludos Commented el 14 sept. 2016 a las 16:02
  • Hola Salvador, bienvenido a SOes, te invito a darte una vuelta por es.stackoverflow.com/tour y es.stackoverflow.com/help/how-to-ask te recomiendo agregar tu HTML, los archivos JavaScript y la estructura que tiene tu proyecto, así podremos reproducir tu caso y ayudarte a encontrar solución. Saludos :D
    – fredyfx
    Commented el 14 sept. 2016 a las 17:03

1 respuesta 1

1

Imagino por el código que pones que tienes un ng-repeat dentro de otro.

Hay un detalle con tu expresión ng-repeat="name in integrantes" que no me parece bien ya que integrantes debe pertenecer a un objeto de tu ng-repeat superior. Debería ser algo como

<div ng-repeat="mesa in mesas">
    <div ng-repeat="name in mesa.integrantes">

Échale un vistazo al ejemplo

angular.module('app', [])
  .controller('MesasCtrl', function($scope) {
    $scope.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,"
      }]
    }]

  });
button {
  border: solid 1px blue;
  background-color: royalblue;
  padding: 10px 15px;
  border-radius: 6px;
}
h1 {
  margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MesasCtrl">
  <div ng-repeat="mesa in mesas">
    <h1>
      {{mesa.mesa}}
    </h1>
    <button type="button" ng-show="!visible" ng-click="visible = true">Mostrar integrantes</button>
    <button type="button" ng-show="visible" ng-click="visible = false">Ocultar integrantes</button>
    <div ng-show="visible">
      <p ng-repeat="integrante in mesa.integrantes">
        {{integrante.nombre}}
      </p>
    </div>
  </div>
</div>

Hay un pequeño detalle aquí y es que uso por doquier una propiedad llamada visible que está directamente en el $scope, sin embargo al cambiarla funciona de forma individual. Eso ocurre porque ng-repeat crea un nuevo $scope por cada iteración así que puedes crearle nuevas propiedades sin que afecten la estructura de los objetos.

Si quieres un widget más avanzado para mostrar y ocultar te sugiero que le eches un vistazo al acordeón de ui-bootstrap.

UPDATE

Según entendí los ng-repeat los tienes uno dentro del otro pero los quieres en lugares separados. Aquí te dejo un fragmento que hace lo que quieres.

angular.module('app', [])
  .controller('MesasCtrl', function($scope) {
    $scope.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,"
      }]
    }]

  });
button {
  border: solid 1px blue;
  background-color: royalblue;
  padding: 10px 15px;
  border-radius: 6px;
}
h1 {
  margin-bottom: 5px;
}
table {
  width: 100%;
}
table tr td {
  text-align: center;
  width: 50%;
  border: solid 1px gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MesasCtrl">
  <table>
    <tr>
      <td>
        <div ng-repeat="mesa in mesas">
          <h1>
            {{mesa.mesa}}
          </h1>
          <button type="button" ng-show="!mesa.visible" ng-click="mesa.visible = true">Mostrar integrantes</button>
          <button type="button" ng-show="mesa.visible" ng-click="mesa.visible = false">Ocultar integrantes</button>
        </div>
      </td>
      <td>
        <div ng-repeat="mesa in mesas">
          <div ng-show="mesa.visible">
            <p ng-repeat="integrante in mesa.integrantes">
              {{integrante.nombre}}
            </p>
          </div>
        </div>
      </td>
    </tr>
  </table>
</div>

Para lograr esto SI tienes que modificar tu arreglo de datos ya que los $scopes en al mismo nivel pero diferentes lugares del DOM no tienen conexión entre sí. Debes iterar en tu colección original en ambos lados de la pantalla y luego iterar en los datos específicos que quieres.

1
  • @SalvadorCarreonBriseño Lee mi actualización, creo que contiene lo que buscas.
    – devconcept
    Commented el 15 sept. 2016 a las 12:24

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.