Transmit information between screens in ionic with Angular?

1

Speak, all right? I will describe the process that is leaving me with doubt. I have a list of elements that is populated with with data that I have. When I click on an item in the list, I want the application to open a detail page for the list I created.

Ex:  - Item 1: POTATO  - Item 2: BANANA

By clicking on item 1, I want a description about the potato. NOTE: I want to use only one details page and templating it according to an id that I transmit through the details page.

Look at my code.

RESULT.HTML

 <ion-view view-title="Resultados">
  <ion-content>
    <ion-list>
      <ion-item class="item item-avatar" ng-repeat="item in resultado" ng-click="openOnly(item)" href="#/app/resultado/{{item.id}}">
        <img src="{{item.imagem}}" style="top: 27.5px;">
        <h2>{{item.nome}}</h2>
        <p>{{item.endereco}}</p>
        <div class="star-avaliacao">
          <i class="ion-star"></i>
          <i class="ion-star"></i>
          <i class="ion-star"></i>
          <i class="ion-star"></i>
          <i class="ion-star"></i>
        </div>
        <i class="ion-chevron-right flechaFlutuante"></i>
        <ion-option-button class="button-positive" ng-click="edit(item)">
          Ligar
        </ion-option-button>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

CONTROLLER.JS

.controller('ResultadosCtrl', function($scope) {
  $scope.resultado = [
    { nome: 'Med Imagem', endereco: 'Rua Paissandu, 1862 - Centro', imagem:'../img/medimagem.jpg', id: 1},
    { nome: 'Clinica Maia', endereco: 'Av. Francisco H. dos Santos, 1190 - JDA', imagem:'../img/user.png', id: 2}
  ];
})

.controller('DetalheCtrl', function($scope, $stateParams) {

});

I hope you get to understand .. Strong hug.

    
asked by anonymous 10.08.2016 / 00:28

2 answers

1

It will depend on how you are, or will get the data, but one thing I believe you will use bastate are services link

a>

Service

Using a service you can save the entire object, and get it back on the next screen.

You can also save the entire result in the service and also id in the next screen you get the id selected in the service and through it the details of the result, who will also be in the service.

It has 2 more solutions, but it will depend on your needs and the project.

Route Params

UIRouter

My reputation does not let me post the links: (

The two are very similar, basically you will be able to pass the id in the url, what else is uirouter, which in your case would look something very similar to what you already have.

<ion-item class="item item-avatar" ng-repeat="item in resultado" ui-sref="resultado(id:item.id)">

Notice that I took ng-click, unless you need to do something before sending it to the next screen, there is no need for it.

    
10.08.2016 / 00:51
0

Dude, I went through these days ... What I did, I created a standard project tabs and I analyzed the generated code and adapted to meet my need ... I realized that I would have to pass the code (in your case it is item) by the url of the project, so it would configure the route of the application.

For example, pass the item id through the url and then use the $ stateParams to capture this value and use it on a service to query.

Create a standard project of tabs, using the node: ionic start myApp tabs command, then look at the app.js, controllers.js, and services.js files for this created project, pay attention to the details you can do. ..

    
02.09.2016 / 02:20