How to load a value in select

Asked

Viewed 850 times

2

$scope.init = function() {
$scope.modelo = {};
$scope.marca = {};
$scope.modelo = {};
$scope.modelos = [];
$scope.marcas = [];
$scope.anos = [];
$scope.precocarro=[];

$http.get('https://fipe-parallelum.rhcloud.com/api/v1/carros/marcas').success(function(data) {
  $scope.marcas = data;
});
  };
  $scope.carregarModelo = function() {
$http.get('https://fipe-parallelum.rhcloud.com/api/v1/carros/marcas/' + $scope.marca.codigo + '/modelos').success(function(data) {

  $scope.modelos = data.modelos;
})
  };

  $scope.carregarAno = function() {  
$http.get('https://fipe-parallelum.rhcloud.com/api/v1/carros/marcas/' + $scope.marca.codigo + '/modelos/' + $scope.modelo + '/anos').success(function(data) {
  $scope.anos = data;
})
  };

  $scope.consultarPreco = function(){
  var url = 'https://fipe-parallelum.rhcloud.com/api/v1/carros/marcas/' + $scope.marca.codigo + '/modelos/' + $scope.modelo + '/anos/' + $scope.anos.codigo;
  console.log(url);
  
  $http.get(url)
  .success(function (data){
      $scope.precocarro = data;
  })
  .error(function (data, status, headers, config) {
      alert('Desculpe, serviço indisponível. Tente novamente mais tarde.')
  });

}
  $scope.init();
<div class="list" ng-controller="AppCtrl">

    
    <label class="item item-input item-select">
        <span class="input-label">Marca</span>
        <select id="teste" class="customSel" ng-options="marca as marca.nome for marca in marcas" ng-model="marca" ng-change="carregarModelo()">
    </select>
    </label>

  <label class="item item-input item-select">
        <span class="input-label">Modelo</span>
         <select id="modelo" class="customSel" ng-model="modelo" ng-change="carregarAno()" >            
        <option ng-repeat="x in modelos" value="{{ x.codigo }}">{{ x.nome }}</option>
    </select>
    </label>

  <label class="item item-input item-select" ng-model="modelo" ng-change="carregarPreco()" >
        <span class="input-label">Ano</span>
         <select id="modelo" class="customSel" >
        <option value="0" selected>Selecione</option>
        <option ng-repeat="x in anos" value="{{ x.codigo }}">{{ x.nome }}</option>
    </select>
    </label>

    <button class="button button-block button-positive" ng-click="consultarPreco(modelo)">Consultar</button>
</div>

angularjs ionic

2 answers

2


In your solution it would be so:

var app = angular.module("app", []);
app.controller("ctrl", ["$scope", "$http", function($scope, $http) {
  $scope.init = function() {
    $scope.modelo = {};
    $scope.marca = {};
    $scope.modelo = {};
    $scope.modelos = [];
    $scope.marcas = [];
    $scope.anos = [];
    $scope.preco = {};
    $scope.ano = {};
    $http.get('https://fipe-parallelum.rhcloud.com/api/v1/carros/marcas').success(function(data) {
      $scope.marcas = data;
    });
  };
  $scope.carregarModelo = function() {
    $http.get('https://fipe-parallelum.rhcloud.com/api/v1/carros/marcas/' + $scope.marca.codigo + '/modelos').success(function(data) {
    
      $scope.modelos = data.modelos;
    })
  };

  $scope.carregarAno = function() {  
    $http.get('https://fipe-parallelum.rhcloud.com/api/v1/carros/marcas/' + $scope.marca.codigo + '/modelos/' + $scope.modelo + '/anos').success(function(data) {
      $scope.anos = data;      
    })
  };
  $scope.consultaPreco = function()
  {
 
    $http.get('https://fipe-parallelum.rhcloud.com/api/v1/carros/marcas/' + $scope.marca.codigo + '/modelos/' + $scope.modelo + '/anos/' + $scope.ano).success(function(data){
    $scope.preco = data;
    });
  }
  $scope.init();
}]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <label class="item item-input item-select">
            <span class="input-label">Marca</span>
            <select id="teste" class="customSel" ng-options="marca as marca.nome for marca in marcas" ng-model="marca" ng-change="carregarModelo()">
        </select>
        </label>

  <label class="item item-input item-select">
            <span class="input-label">Modelo</span>
             <select id="modelo" class="customSel" ng-model="modelo" ng-change="carregarAno()" >            
            <option ng-repeat="x in modelos" value="{{ x.codigo }}">{{ x.nome }}</option>
        </select>
        </label>

  <label class="item item-input item-select">
            <span class="input-label">Ano</span>
             <select id="ano" ng-model="ano" class="customSel" ng-change="consultaPreco()" >
            <option value="0" selected>Selecione</option>
            <option ng-repeat="x in anos" value="{{ x.codigo }}">{{ x.nome }}</option>
        </select>
        </label>
        <div>
    <p>Valor: {{preco.Valor}}</p>
    <p>Marca: {{preco.Marca}}</p>
    <p>Modelo: {{preco.Modelo}}</p>
    <p>Ano Modelo: {{preco.AnoModelo}}</p>
    <p>Combustivel: {{preco.Combustivel}}</p>
    <p>Codigo Fipe: {{preco.CodigoFipe}}</p>
    <p>Mês Referencia: {{preco.MesReferencia}}</p>
    <p>Tipo Veiculo: {{preco.TipoVeiculo}}</p>
    <p>Sigla Combustivel: {{preco.SiglaCombustivel}}</p>
  </div>
</div>

but, I would do so:

var app = angular.module("app", []);
app.controller("ctrl", ["$scope", "$http", function($scope, $http) {
  $scope.init = function() {

    $scope.modelo = {};
    $scope.marca = {};
    $scope.ano = {};
    $scope.preco = {};

    $scope.modelos = [];
    $scope.marcas = [];
    $scope.anos = [];

    $http.get('https://fipe-parallelum.rhcloud.com/api/v1/carros/marcas').success(function(data) {
      $scope.marcas = data;
    });
  };
  $scope.carregarModelo = function() {
    if ($scope.marca == null) {
      $scope.modelos = [];
      $scope.anos = [];
      $scope.preco = {};
    } else {
      $http.get('https://fipe-parallelum.rhcloud.com/api/v1/carros/marcas/' + $scope.marca.codigo + '/modelos').success(function(data) {
        $scope.modelos = data.modelos;
      });
    }
  };

  $scope.carregarAno = function() {
    if ($scope.modelo == null) {
      $scope.anos = [];
      $scope.preco = {};
    } else {
      $http.get('https://fipe-parallelum.rhcloud.com/api/v1/carros/marcas/' + $scope.marca.codigo + '/modelos/' + $scope.modelo.codigo + '/anos').success(function(data) {
        $scope.anos = data;
      });
    }
  };
  
  $scope.consultaPreco = function()
  {
    if ($scope.ano == null)
    {
    $scope.anos = [];
      $scope.preco = {};
    }
    else 
    {
    $http.get('https://fipe-parallelum.rhcloud.com/api/v1/carros/marcas/' + $scope.marca.codigo + '/modelos/' + $scope.modelo.codigo + '/anos/' + $scope.ano.codigo).success(function(data){
    $scope.preco = data;
    });
    }
  }

  $scope.init();
}]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <div class="item item-input item-select">
    <span class="input-label">Marca</span>
    <select id="teste" ng-disabled="marcas.length <= 0" ng-options="ma.nome for ma in marcas" ng-model="marca" ng-change="carregarModelo()">
        <option value="">-- Escolha a Marca --</option>
    </select>
  </div>
  <br />
  <div class="item item-input item-select">
    <span class="input-label">Modelo</span>
    <select id="modelo" ng-disabled="modelos.length <= 0" ng-options="mo.nome for mo in modelos" ng-model="modelo" ng-change="carregarAno()">    
      <option value="">-- Escolha a Modelo --</option>
    </select>
  </div>
  <br />
  <div class="item item-input item-select">
    <span class="input-label">Ano</span>
    <select id="modelo" ng-disabled="anos.length <= 0" ng-change="consultaPreco()" ng-options="an.nome for an in anos" ng-model="ano">
    <option value="">-- Escolha a Ano --</option>
	</select>
  </div>
  <div>
    <p>Valor: {{preco.Valor}}</p>
    <p>Marca: {{preco.Marca}}</p>
    <p>Modelo: {{preco.Modelo}}</p>
    <p>Ano Modelo: {{preco.AnoModelo}}</p>
    <p>Combustivel: {{preco.Combustivel}}</p>
    <p>Codigo Fipe: {{preco.CodigoFipe}}</p>
    <p>Mês Referencia: {{preco.MesReferencia}}</p>
    <p>Tipo Veiculo: {{preco.TipoVeiculo}}</p>
    <p>Sigla Combustivel: {{preco.SiglaCombustivel}}</p>
  </div>
</div>

  • To consult the Final Price, would it look like this ? I edited the question. When executing the field years, in the query, appears Undefined.

  • @Tommz done editing with the price query, if you prefer use the second option !

  • Thank you so much for the help @Virgili Novic.

  • @Tommz if it was useful tick as answer to the question

  • Done @Virgili Novic

2

You can make use of chained Promises:

$http.get('https://fipe-parallelum.rhcloud.com/api/v1/carros/marcas')
  .then(function(data) {
      $scope.marcas = data;
      return $http.get('https://fipe-parallelum.rhcloud.com/api/v1/carros/marcas/'+marca.codigo+'/modelos');
  }).then(function (data) {
       $scope.modelo = data;
       return $http.get('https://fipe-parallelum.rhcloud.com/api/v1/carros/marcas/'+marca.codigo+'/modelos/'+ano.codigo+'/anos');
  }).then(function (data) {
       $scope.ano = data;
  });

  • It didn’t work, it didn’t load the lists. Is that why $Scope is missing.loadModel ?

Browser other questions tagged angularjs ionic

You are not signed in. Login or sign up in order to post.