Returning ZIP code data in form

I have the following problem: I am trying to fill in the fields
public place, city and state with the informed zip.
They are all input.
I’m using link
My project is in Django, but I think you can return the data directly on the html page (front-end), since it’s just fill and insert.

How do I do this? I tried with AngularJS, but I’m getting caught.

Please help me.

1) You need some url in your backend that accepts a zip and returns u json.
That is, you will open in your browser: localhost:8000/api/consultacep/91370000 and you will see:


{'Localidade': u'Porto Alegre', 'Bairro': u'Vila Ipiranga', 'UF': u'RS', 'Logradouro': u'Rua Alberto Silva - atxe9 965/966', 'CEP': u'91370-000'}


2) Somewhere in your controller you will make a call to this api and save the result in $ scope:


$http.get('/api/consultacep/91370000').success(function(local){
$scope.local_encontrado = local;
});


3) In your template you need to show the attributes of $ scope.local_content. Do this using ng-model:


Localidade: <input type="text" ng-model="local_encontrado.Localidade"><br>
Bairro: <input type="text" ng-model="local_encontrado.Bairro"><br>
UF: <input type="text" ng-model="local_encontrado.UF"><br>
<!-- etc -->


My friend @Tony Lámpara gave me another little help!

Thanks @Tony Lamp

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<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){

        $scope.busca = function(){
            $http.get('http://api.postmon.com.br/cep/'+ $scope.cep).success(function(local){
                $scope.local_encontrado = local;
                console.log(local);
            });
        };

        $scope.enter = function(e){
            if(e.keyCode == 13){
                $scope.busca();
            };
        };
    });
</script>