1

Bom dia Srs.,

Como eu posso passar dados de um item que foi selecionado dentro de uma lista ng-repeat para outra view?

Segue trecho do código da primeira view:

                <div ng-repeat="jogador in dadosjogador | filter:{xid:equipe.jogador}" >
                    <div class="item-avatar item-button-right">
                      <img src="img/user1.jpg">
                      <h2>{{jogador.nome}}</h2>
                      <form action="voto.html" class="urna">
                          <input type="submit" value="Votar" />
                      </form>                      
                    </div>
                </div>

Abaixo segue trecho do código da segunda view:

  <body ng-app="starter" ng-controller="equipecontrol">

  <ion-header-bar class="bar-calm" align-title="center">
    <button class="button button-icon icon ion-ios-arrow-back ng" ng-click="goback()"></button>
    <h1 class="title">{{jogador.nome}}</h1>
    <button class="button button-icon icon ion-navicon" ></button>
  </ion-header-bar>
  </body>

Nesta segunda view usei {{jogador.nome}} mas o nome do jogador não é apresentado.

Já tentei usar uma variável $rootScope._nomejogador, declarei a mesma no controller equipecontrol, que é comum as duas views, mas também não sei como fazer: $rootScope._nomejogador = {{jogador.nome}} no momento que o item for selecionado e chamar a outra view.

Alguém teria uma ideia como eu posso resolver esta questão

2 Respostas 2

1

Sempre que você desejar compartilhar informações entre partes da sua aplicação Angular, utilize Services ou Factories.

O exemplo abaixo demonstra a utilização de um service para compartilhar dados de jogadores, assim como um mecanismo primitivo de votação:

inserir a descrição da imagem aqui

Clique em Executar para vê-lo em funcionamento:

angular.module('myApp', [])
.service('jogadorService', function(){

    // Note que os dados dos jogadores são centralizados no service - 
    // assim, sempre que você modificar esta lista, todos as referências 
    // em todos os módulos consumidores serão atualizadas.

    this.jogadores = {
        1: {nome: 'Ono'},
        2: {nome: 'Ana'},
        3: {nome: 'Ini'},
        4: {nome: 'Uno'},
    };

    // Aqui é onde iremos acumular os contadores de votos:

    this.selecionados = {};
})
.controller('votoController', function($scope, jogadorService){

    // Vamos tornar o serviço acessível pela view...

    $scope.svc = jogadorService;
    
    // E implementar o mecanismo de votação:

    $scope.votar = function(k){
    
        if (!jogadorService.selecionados[k]) 
          jogadorService.selecionados[k] = 0;
    
        jogadorService.selecionados[k]++;
    }

})
.controller('visualizacaoController', function($scope, jogadorService){

    // Previsamos disponibilizar o serviço para a view do segundo
    // controller também:

    $scope.svc = jogadorService;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<div ng-app="myApp">

Vote aqui:

  <table ng-controller='votoController'>
    <tr ng-repeat='(k,v) in svc.jogadores'>
    <td>{{k}}</td>
    <td>{{v.nome}}</td>
    <td><button ng-click='votar(k)'>Votar</button></td>
    </tr>
  </table>
  
  <br/>
  
  Votados:
  
  <table ng-controller='votoController'>
    <tr ng-repeat='(k, v) in svc.selecionados'>
    <td>{{k}}</td>
    <td>{{svc.jogadores[k].nome}}</td>
    <td>{{v}}</td>
    </tr>
  </table>
  
  
</div>

3
  • interessante a questão do botão votar, mas minha necessidade é passar informações do item da ng-repeat para a outra view. Você teria uma ideia de como fazer isso?
    – Ita
    4/06/2017 às 15:45
  • @Ita O exemplo acima demonstra exatamente este processo - compartilhamento de informações entre uma coleção sob iteração para outra view. Qual seria sua dúvida específica que não é coberta pelo exemplo?
    – OnoSendai
    5/06/2017 às 0:41
  • tentei implementar desta forma que você orientou mas não obtive sucesso. Coloquei as coleções em um Service e no controller declarei uma variável $scope recebendo o serviço, lembro que tenho apenas um controller para as duas views, no entanto quando tento listar a coleção, até mesmo na primeira view, nada é apresentado. Antes a coleção dadosjogador era declarada no controller como $rootScope, agora que a declarei como this dentro do service e a mesma deixou de ser listada.
    – Ita
    6/06/2017 às 22:01
0

Adione um botão dentro do seu ng-repeat que chame um controller "Editar" e passe seu model. Crie o método no controller que receba o model e passe este valor a um segundo model e chame outra view.

$scope.editUser = function(user) {
    $scope.user = angular.copy(user);
}

$scope.updateUser = function(user) {
    $http.post('api/updateUser.php', {
        "id": user.id,
        "fullname":user.fullname,
        "email":user.email
    }).success(function(data)
        alert("Update success");
    }).error(function(data, status){
        console.log("Error update user: "+data');
    });
}

O exemplo acima serie uma forma.. Não é a melhor forma, mas espero que você tenha entendido. Olhe este exemplo no Github: Série Angular - Rodrigo Branas

1
  • Mr. Robot, minha maior necessidade é passar o dados do item da ng-repeat na qual foi clicado o botão votar, para ser exibido em outra view, você teria uma ideia de como posso fazer isso?
    – Ita
    4/06/2017 às 15:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .