FIPE Table API Form using Angular

Asked

Viewed 1,367 times

1

Personal talk. I’m a beginner in Angular and would like a 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', function MyCtrl($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 am trying to create a form that queries which brand of car selected and then provides the name of the cars referring to that brand.

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

html angularjs api

1 answer

3


Follow solution in plunker: https://plnkr.co/edit/fRyU7lbbwy0EVcqQCCxQ

I switched to use "ng-options" in the brand and used "ng-change" to trigger the models query.

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

  • Thanks for the answer, but my question is on how I will bring the data of the second request taking the brand ID to return the models. I edited the post to make more explicit, thanks for the contribution.

  • I get it. I changed my answer. See if it helps you now. It worked here at first.

  • It worked Alexandre, thanks.

Browser other questions tagged html angularjs api

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