How to make the data appear in the fields in AngularJS

Question

How to make the data appear in the fields in AngularJS

Navigation

#1 by (5 votes)
#2 by (1 votes)
#3 by (0 votes)

3

I am entering with a zip and a search is done and brings me the other data ... However, I want the data to be displayed, each in its own field, as it will be inserted into the database. How to proceed?

html:

<body ng-controller="appController">
<div align="center">
<form>
<table width="100">
    <label>CEP </label><br>
    <input type="text" ng-model="endereco.cep" ng-blur="pegaCep()"><br>
    <label>Estado </label><br>
    <input type="text" ng-model="endereco.uf"><br>
    <label>Cidade </label><br>
    <input type="text" ng-model="endereco.cidade" size="30"><br>
    <label>Bairro </label><br>
    <input type="text" ng-model="endereco.bairro" size="30"><br>
    <label>Rua </label><br>
    <input type="text" ng-model="endereco.logradouro" size="30"><br>
</table>
</form>
</div>
</body>

controller:

app.controller('appController', function ($scope, $http){
$scope.endereco = {}
$scope.pegaCep = function () {
    $http.get("php/pegaCep.php?cep="+$scope.endereco.cep).success(function (endereco){
        console.log(endereco);
        $scope.endereco = endereco;
    });
 }

});

php:

<?php
ini_set('display_errors', true);
error_reporting(E_ALL);

$cep = $_GET['cep'];
//print_r($cep);

include('correios.class.php');
if(isset($_GET['cep'])){
$correios = Correios::cep($_GET['cep']);
$correios = json_encode($correios[0]);
    die($correios);
}elseif(isset($_GET['codigo_rastreio'])){
    die(json_encode(Correios::rastreio($_GET['codigo_rastreio'])));
}else{
    die('informe parametro GET cep ou codigo_rastreio');
}
?>

php html angularjs

asked by anonymous 20.01.2016 / 21:30

3 answers

Set date / time from user-entered month Draw image using css

score 5 · Answer 1

You are using the $http service. The returned object includes several parameters. Make the following changes to your code:

$scope.endereco = {};

$scope.pegaCep = function () {
    $http.get("php/pegaCep.php?cep="+$scope.endereco.cep).success(function (retorno){
        console.log(retorno);
        $scope.endereco = retorno.data;
    });
 }

Notice that the data property contains the returned value.

Properties of the object returned by the $ http: service

date - {string|Object} - the content of the response, properly transformed.
status - {number} - HTTP code returned.
headers - {function([headerName])} - function to return headers.
config - {Object} - The configuration object of the original request.
statusText - {string} - The HTTP status in text format.

Reference: link $ http

score 1 · Answer 2

As an alternative to friend @lbotinelly's response, when I went through a similar situation, what solved my problem was to directly apply the value to each field, like this:

$scope.pegaCep = function () {
    $http.get("php/pegaCep.php?cep="+$scope.endereco.cep).success(function (retorno){
        $scope.endereco.cep = retorno.data.cep;
        $scope.endereco.logradouro = retorno.data.logradouro;
        //etc..
    });
};

Or the use of $apply() (in the last case).

If it still does not solve your problem, make sure the console actually displays the data as you expect it to.

$scope.pegaCep = function () {
    $http.get("php/pegaCep.php?cep="+$scope.endereco.cep).success(function (retorno){
        console.log(retorno.data);
    });
}

Because the problem may not be in AngularJS.

Note:

Use my answer in the latter case, his is the correct way.

score 0 · Answer 3

["customer": "", "street": "Beco A (Estr Cristiano Kraemer)", "neighborhood": "Vila Nova", "cep": "91750073", " "," uf ":" RS "}]

Since the return of php is the above, you need to do the following:

app.controller('appController', function ($scope, $http){
$scope.endereco = {}
$scope.pegaCep = function () {
    $http.get("php/pegaCep.php?cep="+$scope.endereco.cep).success(function (endereco){

        $scope.endereco = endereco.data[0];
    });
 }

});

Now it will work