Transmit information between screens in Ionic with Angular?

Question

Talk personal, all right? I’m going to describe the process that’s leaving me in doubt. I have a list of elements that is filled with data I have. When I click on a list item, I want the app to open a detail page referring to the list I created.

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

When you click on item 1, I want a description about the potato. NOTE: I want to use only a detail page and templating it according to an id 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 understand. Hug.

Answer 1

It will depend on how you get this, or you will get the data, but one thing I believe will use enough are services https://docs.angularjs.org/guide/services

Service

Using a Voce service you can store the entire object, and pick it up again on the next screen.

You could also save the whole result in the service and also the id there in the next screen You take the selected id in the service and through it the details of the result, who will also be in the service.

There are 2 more solutions, more there will depend on your needs and the project.

Route Params

Uirouter

My reputation won’t let me post the links :(

The 2 are very similar, basically Voce will be able to pass the id in the url, what more use is uirouter, which in your case would look 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 the ng-click, unless you need to do something before sending to the next screen, there is no need for it.

Answer 2

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

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

Create a standard tabs project, using the Node: Ionic start myapp tabs command, then analyze the app.js, controllers.js and services.js files of this created project, stick to the details you can do....