difficulties with ng-click and show data with angular

Question

difficulties with ng-click and show data with angular

Navigation

#1 by (2 votes)

1

Greetings, such. I have an app that shows the people registered for an event and its corresponding place.

Code in jade. Broadly speaking it is a list that shows the name of the person, in which table is located and how many guests have

  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(ng-hide="nombre.nombre === 'Acompañante'")
                  div.centralCont-nombres 
                    div.aling-left
                      input(type="checkbox" ng-model="nombre.done" ng-click="onMark($event)").checkbox
                      h3.centrarCont--invtNombre(ng-click="mostrar()") {{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 = true") Ocultar
                  div.central-cont-mesa
                    p.central-cont--mesa {{nombre.mesa}}
                    p.centralCont--entrada Mesa

What I have not been able to do is that if I click on a guest who is at table 1, show me all the guests from table 1 on another div (only the names) and then I click on a guest that is on table two hide the guests of table 1 and show the guests of table two

in js I have several things.

$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,
      }],
    },{
      "mesa": "mesa2",
      "integrantes": [{
        "nombre": "Ivan Ponce Sotelo",
        "mesa": "2",
        "entradas": "1",
        "usadas": "0,",
        "done" : false,
      }, {
        "nombre": "Karla Sandoval",
        "mesa": "2",
        "entradas": "1",
        "usadas": "0,",
        "done" : false,
      },{
        "nombre": "Jorge Echeagaray Sotelo",
        "mesa": "2",
        "entradas": "1",
        "usadas": "0,",
        "done" : false,
      },{
        "nombre": "Jose Arturo Otero Davila",
        "mesa": "2",
        "entradas": "1",
        "usadas": "0,",
        "done" : false,
      },{
        "nombre": "Humberto Jimenez Arellano",
        "mesa": "2",
        "entradas": "1",
        "usadas": "0,",
        "done" : false,
      },{
        "nombre": "David Aceves",
        "mesa": "2",
        "entradas": "1",
        "usadas": "0,",
        "done" : false,
      },{
        "nombre": "Arturo Fernando Lomeli Sotelo",
        "mesa": "2",
        "entradas": "1",
        "usadas": "0,",
        "done" : false,
      },{
        "nombre": "Zaira",
        "mesa": "2",
        "entradas": "1",
        "usadas": "0,",
        "done" : false,
      },{
        "nombre": "Scarlete Sanchez Sotelo",
        "mesa": "2",
        "entradas": "1",
        "usadas": "0,",
        "done" : false,
      }, {
        "nombre" : "luis",
        "mesa": "2",
        "entradas": "1",
        "usadas": "0,",
        "done" : false,
      }]
    }],

}];

and a code that checks me out

"use stric";

var app = angular.module("app", ["ngMaterial"]);

app.controller("MesasCtrl", ($scope) =>{
  $scope.people = 0;
  $scope.markedPeople = 0;
  (() => {
    $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--;
    }
  }
});

Where I want the names to appear is this part of the view

div.centralCont-column 
  h2.centralCont--titulo INFORMACIÓN DE LA MESA
  div.centralCont-invitado
    div(ng-repeat="mesa in mesas") 
      div(ng-show="mesa.visible")
        p(ng-repeat="nombre in mesa.integrantes", ng-class="{'done-true':nombre.done}").centralCont-invitado__text {{nombre.nombre}}

javascript html angularjs

asked by salvador Godinez 27.10.2016 в 03:09

source

1 answer

Send notifications when you insert to MySQL from Asterisk How to register push notifications in Swift 3?

score 2 · Answer 1

I would do it in the following way.

$scope.listaMesas= [] //Esta es mi lista de invitados
$scope.showMesa= [] // los invitados a mostrar
var mesa = -2;

// Con esta funcion seteo los invitados de la mesa y si ya estan mostrandose los oculto
$scope.setShowInvitados = function(key){
  $scope.showInvitados = (mesa == key) ? $scope.listaMesas[key] : [];
}