Save data clicked on a JSON

Question

I am creating a simple application in Angularjs, the application boils down to 3 pages:

1. Apparatus: Where the person chooses the apparatus
2. Plans: Choose the plane related to the device
3. Final registration informing name, email, phone and etc...

The list of possible devices and plans for that chosen device comes from a JSON file, which I pick up through an HTTP request

The question is: I would like to go saving this information, when it clicks on a device, then the plan and save and after writing the data saved everything and left on the end page and a console.log, but how do I do it?

This is my file api.js, where I request the devices:

// 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;



    });

});

This is the file home html., where the person chooses the apparatus:

<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>

I came to create the following scheme, but it didn’t work, saved in localstorage as undefined:

    // click event

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

});

Answer 1

A good practice of Angular is to leave the Controller only to redirect content, while your business rule stays in a Service (or Factory, whatever). You can create a Factory with the objects you want to save (devices, plans, etc.) and access them via controller. For example, when you choose the plan, you call (by the controller) a function that will call the "save Match(device)" function of your service.

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)*/
  }
}

Answer 2

Apparently your problem is in the code to pick up the desired device, I will recommend you some modifications.

In 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>

In 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...
}

The idea here is to use the features that Angularjs offers you, if you are already inside an ng-repeat and want to do something with that item, eg: If I want to select the X device when you click its button, create something in your javascript that already expects the device, makes it easier to work.