Form with FIPE Table API using Angular

Question

Form with FIPE Table API using Angular

Navigation

#1 by (3 votes)

1

Speak up. I am a beginner in Angular and would like help with this form.

<html ng-app="app">
<head>

    <title>Teste</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script><script>angular.module('app',[]);angular.module('app').controller('MyCtrl',functionMyCtrl($http,$scope){$http.get('https://fipe-parallelum.rhcloud.com/api/v1/carros/marcas').success(function(data){$scope.greeting=data;});$scope.carregarModelo=function(modelo){$http.get("https://fipe-parallelum.rhcloud.com/api/v1/carros/marcas/"+modelo+"/modelos").success(function (data) {
                   $scope.modelo = data;
                });
            };

        });
    </script>
</head>
<body ng-controller="MyCtrl">
    <div>
        <h1>Marcas</h1>
        <select id="teste1" class="customSel">
            <option ng-click="carregarModelo({{ x.codigo }})" ng-repeat="x in greeting" value="{{ x.codigo }}">{{ x.nome }}</option>
        </select>
    </div>
    <div>
        <h1>Modelo</h1>
        <select id="teste2" class="customSel">
            <option value="0" selected>Selecione</option>
            <option ng-repeat="x in modelo" value="{{ x.codigo }}">{{ x.nome }}</option>
        </select>
    </div>
</body>

I'm trying to create a form that queries which car brand is selected, and then gives the name of the cars that refer to that brand.

The part of consulting the brand already works, I could not make the list of cars work, because I can not pass on the value of the brand to a new function, could you help me? Thanks.

api html angularjs

asked by anonymous 01.03.2016 / 16:34

1 answer

How to add my validation in Laravel Validator? Pass value from Select html to Controller via Post

score 3 · Accepted Answer

Follow the plunker solution: link

I changed to use the "ng-options" in the tag and I used "ng-change" to trigger the query of the templates.

<script>

    angular.module('app', []);
    angular.module('app').controller('MyCtrl', function MyCtrl($http, $scope){

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

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

    });
</script>

<body ng-controller="MyCtrl">
<div>
    <h1>Marcas</h1>
    <select id="teste1" class="customSel" ng-options="x as x.nome for x in greeting" ng-model="marca" ng-change="carregarModelo(marca)">
    </select>
</div>
<div>
    <h1>Modelo</h1>
    <select id="teste2" class="customSel">
        <option value="0" selected>Selecione</option>
        <option ng-repeat="x in modelo.modelos" value="{{ x.codigo }}">{{ x.nome }}</option>
    </select>
</div>