7
respostas

Duvida para criar outra página

Estou criando um aplicativo para reuniões, já estou conseguindo obter as informações das reuniões como titulo, pauta , etc. Próximo passo e fazer a tela depois que clico na reunião, igualzinho a do AluraCar, porém não estou conseguindo. O objetivo é clicar no titulo da minha reunião e abrir outra página com todas as informações da mesma.

7 respostas

Oi Eder, tudo bem ?

Qual é a dificuldade que está encontrando ?

Olá.

Poste aqui o código que vc fez e também o erro para a gente poder te ajudar.

<ion-view>
    <ion-nav-title>Lista de Reuniões IFSP</ion-nav-title>
    <ion-content>
      <ion-list>
        <ion-item ng-repeat="reuniao in listaDeReuniao" href="#/carroescolhido/{{reuniao}}" >

          <p> <b>Título:</b> {{reuniao.titulo}} </p> 
          <p> <b>Pauta:</b> {{reuniao.pauta}} </p> 
          <p> <b>Local:</b> {{reuniao.local}}</p> 
          <p> <b>Data:</b> {{reuniao.datahora}}</p>

        </ion-item>

    </ion-list>
  </ion-content>
</ion-view>

tela de destino:

<ion-view>
    <ion-nav-title>Reunião Escolhida</ion-nav-title>
    <ion-content>
    <div class="card">
        <div class="item item-divider">
            Detalhes
        </div>
        <div class="item item-text-wrap">
            {{reuniaoEscolhido.nome}}

            <ul class="list">
                <li class="item item-toggle" ng-repeat="acessorio in listaDeReuniao" >
                     {{reuniao.id_reuniao}}  {{reuniao.id_responsavel}} - {{reuniao.titulo}} - {{reuniao.pauta}} - {{reuniao.local}} - {{reuniao.datahora}} - {{reuniao.id_categoria}}
                     <label class="toggle toggle-assertive">
                       <input type="checkbox" ng-model="isMarcado" ng-click="mudou(acessorio, isMarcado)" >
                       <div class="track">
                         <div class="handle"></div>
                       </div>
                     </label>
                  </li>

            </ul>

        </div>


    </div>

    <a class="button button-positive button-full" href="#/finalizarpedido/{{carroEscolhido}}" >Finalizar pedido</a>

    </ion-content>
</ion-view>

Olá.

Sem o erro fica dificil saber em qual ponto está o erro.

obs: Tomar cuidado ao colocar código aqui pois se colocar só HTML puro, o editor do forum vai identificar de uma maneira errada. Use as dicas no botão formatação para deixar seu código fácil da gente ler e te ajudar.

Olá Lazaro,

Preciso fazer um aplicativo parecido com o AluraCar, deve ter uma página com uma listagem, que deverá ter uns 3 campos de uma listagem que esta vindo de um WebService que retorna dados em Json. Quando clicar em um destes itens deverá ser aberto uma nova página com todas as informações (todos os campos) daquele registro, semelhante a página de adicionar acessórios. Minha listagem já esta funcionando, porém quando eu clico em um item a página de detalhes não esta aparecendo os dados. Abaixo seguem os códigos de todas as páginas. Meu service :

angular.module('starter')
.service('ReuniaoService', function($http){
    //var url = 'https://aluracar.herokuapp.com/';
    var url ='http://ederpansani.com.br/api/public/index.php/api/reuniao';
    return{
        obterReuniao : function(){
            return $http.get(url).then(function(response){
                return response.data;
            });
        }, 
        salvarPedido : function(pedido){
            return $http.get(url + "salvarpedido" , pedido).then(function(response){
                return "Deu certo.";
            });
        }
    }
});

Meu controller

angular.module('starter')
.controller('ListagemController', function($scope, ReuniaoService){
    //CarroService.obterCarros().then(function(dados){
    ReuniaoService.obterReuniao().then(function(dados){
        //$scope.listaDeCarros = dados;
        $scope.listaDeReuniao = dados;
    });
});
angular.module('starter')
.controller('CarroEscolhidoController', function($stateParams, $scope){
    $scope.reuniaoEscolhido = angular.fromJson($stateParams.carro);
    $scope.listaDeAcessorios = [{"nome" : "{{Freio ABS}}", "preco": 800},
                                {"nome" : "Ar Condicionado", "preco": 1000},
                                {"nome" : "MP3 Player" , "preco" : 500}];
    $scope.mudou = function(acessorio, isMarcado){
        if (isMarcado) {
            $scope.carroEscolhido.preco = 
                    $scope.carroEscolhido.preco + acessorio.preco;
        } else {
            $scope.carroEscolhido.preco =                     $scope.carroEscolhido.preco - acessorio.preco;
        }
    };
});
angular.module('starter')
.controller('FinalizarPedidoController', function($stateParams, $scope
    , $ionicPopup, $state, CarroService){
    $scope.carroFinalizado = angular.fromJson($stateParams.carro);
    $scope.pedido = {};
    $scope.finalizarPedido = function(){
        var pedidoFinalizado = {
            params : {
                carro : $scope.carroFinalizado.nome,
                preco : $scope.carroFinalizado.preco,
                nome :  $scope.pedido.nome,
                endereco : $scope.pedido.endereco,
                email : $scope.pedido.email
            }
        }
    CarroService.salvarPedido(pedidoFinalizado).then(function(dados){
            $ionicPopup.alert({
                title: 'Parabens',
                template: 'Você acaba de comprar um carro.'
            }).then(function(){
                $state.go('listagem');
            });
        }, function(erro){
            $ionicPopup.alert({
                title: 'Deu erro',
                template: 'Campos obrigatórios'
            });
        });
    }
});

Continuando a pergunta...

angular.module('starter')
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/telainicial');
$stateProvider
.state('listagem',{
    url : '/listagem',
    templateUrl : 'templates/listagem.html',
    controller: 'ListagemController'
})
.state('carroescolhido',{
    url : '/carroescolhido/:carro',
    templateUrl: 'templates/carroescolhido.html',
    controller: 'CarroEscolhidoController'
})
.state('finalizarpedido',{
    url : '/finalizarpedido/:carro',
    templateUrl : 'templates/finalizarpedido.html',
    controller : 'FinalizarPedidoController'
})
.state('telainicial',{
    url : '/telainicial',
    templateUrl : 'templates/telainicial.html',
    controller : 'ListagemController'
})
})

Página de Listagem:

<ion-view>
    <ion-nav-title>Lista de Reuniões IFSP</ion-nav-title>
    <ion-content>
      <ion-list>
        <ion-item ng-repeat="reuniao in listaDeReuniao" href="#/carroescolhido/{{reuniao}}" >
          <p> <b>Título:</b> {{reuniao.titulo}} </p> 
          <p> <b>Pauta:</b> {{reuniao.pauta}} </p> 
          <p> <b>Local:</b> {{reuniao.local}}</p> 
          <p> <b>Data:</b> {{reuniao.datahora}}</p> 
        </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

Página de Detalhes

<ion-view>
    <ion-nav-title>Reunião Escolhida</ion-nav-title>
    <ion-content>
    <div class="card">
        <div class="item item-divider">
            Detalhes
        </div>
        <div class="item item-text-wrap">
            {{reuniaoEscolhido.nome}}
            <ul class="list">
                <li class="item item-toggle" ng-repeat="acessorio in listaDeReuniao" >
                     {{reuniao.id_reuniao}}  {{reuniao.id_responsavel}} - {{reuniao.titulo}} - {{reuniao.pauta}} - {{reuniao.local}} - {{reuniao.datahora}} - {{reuniao.id_categoria}}
                     <label class="toggle toggle-assertive">                   
                       <div class="track">
                         <div class="handle"></div>
                       </div>
                     </label>
                  </li>
            </ul>
        </div>
    </div>
    <a class="button button-positive button-full" href="#/finalizarpedido/{{carroEscolhido}}" >Finalizar pedido</a>
    </ion-content>
</ion-view>

Qualquer dúvida, estou a sua disposição. Muito Obrigado.

O link das telas segue logo abaixo:

https://www.dropbox.com/sh/mzhuazjpw0d65zu/AADhef3kzGS-QZ5dOjjRwEvma?dl=0

E uma observação que ao clicar no primeiro tópico do listar, ele não abre a página detalhes, já as outras sim.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software