How to pass data from a selected ng-repeat item to another view

Asked

Viewed 719 times

1

Good morning Gentlemen.,

How can I pass data from an item that has been selected within an ng-repeat list to another view?

Here is an excerpt from the first 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>

Below is an excerpt from the code of the second 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>

In this second view I used {{jogador.nome}} but the player’s name is not displayed.

I’ve tried using a variable $rootScope._nomejogador, I declared the same in the equipecontrol controller, which is common the two views, but also do not know how to do: $rootScope._nomejogador = {{jogador.nome}} the moment the item is selected and calls the other view.

Would anyone have an idea how I can resolve this issue

angularjs

2 answers

1

Whenever you want to share information between parts of your Angular application, use Services or Factories.

The example below demonstrates the use of a service to share player data, as well as a primitive voting mechanism:

inserir a descrição da imagem aqui

Click on Execute to see it in operation:

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>

  • interesting the question of the vote button, but my need is to pass information from the ng-repeat item to the other view. You’d have an idea how to do that?

  • @Ita The example above demonstrates exactly this process - information sharing between a collection under iteration to another view. What would be your specific doubt that is not covered by the example?

  • I tried to implement this way that you guided but did not succeed. I put the collections in a Service and in the controller declared a $Scope variable receiving the service, I remember that I have only one controller for both views, however when I try to list the collection, even in the first view, nothing is presented. Previously the player data collection was declared in the controller as $rootScope, now that I declared it as this within the service and it is no longer listed.

0

Add a button inside your ng-repeat that calls an "Edit" controller and passes your model. Create the method in the controller that receives the model and pass this value to a second model and call another 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');
    });
}

The above example is a way.. It is not the best way, but I hope you have understood. Look at this example on Github: Angular Series - Rodrigo Branas

  • Mr. Robot, my greatest need is to pass the data of the ng-repeat item on which the vote button was clicked, to be displayed in another view, you would have an idea of how I can do this?

Browser other questions tagged angularjs

You are not signed in. Login or sign up in order to post.