1

Estou criando uma aplicação simples em AngularJS, a aplicação se resume em 3 páginas:

  1. Aparelho: Onde a pessoa escolhe o aparelho
  2. Planos: Escolhe o plano relacionado ao aparelho
  3. Cadastro final informando nome, e-mail, telefone e etc...

A lista de aparelhos e de planos possíveis para aquele aparelho escolhido vem de um arquivo JSON, que eu pego através de uma requisição HTTP

A dúvida é: Eu gostaria de ir salvando essas informações, quando ele clicar em um aparelho, depois o plano e salvasse e depois de escrever os dados salvasse tudo e saisse na página final e um console.log, mas como faço isso?

Esse é o meu arquivo api.js, onde faço a requisição dos aparelhos:

// plataformas 
//arquivo api.js
app.controller('plataformAPI', function($scope, $http){
    $http.get('http://private-59658d-celulardireto2017.apiary-mock.com/plataformas')
    .then(function(response){


          $scope.dados = response.data.plataformas;



    });

});

Esse é o arquivo home.html, onde a pessoa escolhe os aparelhos:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"  align="center" ng-controller="plataformAPI">
  <div ng-repeat="x in dados">
    <h1>{{x.nome}}</h1>
    <p>{{x.descricao.replace('|',' ')}}</p>
    <p><a class="btn btn-primary btn-md" href="{{prefix + x.nome}}" role="button">Quero esse</a></p>
  </div>
</div>

Cheguei a criar o seguinte esquema, mas não funcionou, salva no localstorage como undefined:

    // click event

    $scope.eventos = {};
    $scope.eventos.Clique = function() {
        var nomeAparelho = document.getElementsByClassName('nomeAparelho').value;
        localStorage.setItem("aparelho:", nomeAparelho);
    }

});

2 Respostas 2

0

Uma boa prática do Angular é deixar o Controller apenas para redirecionar o conteúdo, enquanto sua regra de negócio fica em um Service (Ou Factory, tanto faz). Você pode criar um factory com os objetos que deseja salvar (aparelhos, planos, etc) e acessá-los via controller. Por exemplo, hora que escolher o plano, você chama (pelo controller) uma função que irá chamar a função "gravarAparelho(aparelhoObj)" do seu serviço.

app.controller('plataformAPI', function($scope, meuService){
/* faz a injeção de dependencia do meuService no controller */

  meuService.exemploDeApi().then(respostaDaFuncaoDoService) {
    $scope.dados = respostaDaFuncaoDoService;
    // qndo houver resposta do $http.get, ele vai retornar a resposta, que será armazenada no $scope.dados (como vc fez o retorno dos aparelhos)

  $scope.escolherAparelho = function(aparelho) {
    meuService.gravarAparelho(aparelho); // armazena o parametro "aparelho" no OBJETO meusDados.aparelho (do service)
  }

  }
    

});

app.factory('meuService', function ($http) {
  
  /* seu objeto */
  var meusDados = {
    'aparelho': null,
    'nomePessoa': null,
    'plano': null
  }

  var _gravarAparelho = function (objetoAparelho) {
    meusDados.aparelho = objetoAparelho;
  }
  
  var _recuperarMeusDados = function () {
    return meusDados;
  }
  
  var _exemploDeAPI = function () {
    return $http.get('http://private-59658d-celulardireto2017.apiary-  mock.com/plataformas');

  return {
    _gravarAparelho: gravarAparelho,
    _recuperarMeusDados: recuperarMeusDados,
    __exemploDeAPI: exemploDeAPI
    /* quando o CONTROLLER chamar "meuService.gravarAparelho()" ele vai entender que 'gravarAparelho' se refere a funçao '_gravarAparelho' (dentro do service)*/
  }
}

0

Aparentemente seu problema está no código de pegar o aparelho desejado, irei lhe recomendar algumas modificações.

No html:

<div ng-repeat="x in dados">
    <h1>{{x.nome}}</h1>
    <p>{{x.descricao.replace('|',' ')}}</p>
    <button class="btn btn-primary btn-md" ng-click="selecionarAparelho(x)">Quero esse</button>
</div>

No javascript:

$scope.selecionarAparelho = function(aparelhoSelecionado) {
    localStorage.setItem("aparelho:", aparelhoSelecionado.nome);
    //Aqui dentro você pode adicionar a logica da mudança de página também...
}

A ideia aqui é usar os recursos que o angularJS te oferece, se você já está dentro de um ng-repeat e quer fazer algo com aquele item, ex: Se quero selecionar o aparelho X quando clicar no botão dele, crie algo no seu javascript que já espere o aparelho, assim fica mais fácil de trabalhar.

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 .