AngularJS take a data from the input that was filled by a JS

Question

AngularJS take a data from the input that was filled by a JS

Navigation

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

3

Good morning, I'm a beginner with Web, although I know how to program in other languages. My question is as follows, via the path cep I got the algorithm that fills the address fields through a Javascript.

My imput is this:

input class="form-control" type="text" id="rua" ng-model="cadastro.endereco.endereco" maxlength="60"

Javascript fills in the input when you type the zip, but at the time of saving, the data that was completed by js is NOT saved. Only the Zip Code, Number and Add-in that were entered manually. can anybody help me? Thank you.

I did so, I used the script of this site link

to buck the address through the zip. so I put the same id in js to fill the text area.

input class="form-control" type="text" id="street" ng-model="cadastro.endereco.endereco" maxlength="60"

It fills in perfectly, it happens that at the time of saving, the fields that were filled by the script are left blank, only the fields that I typed manually as the number and complement of the address

I have found that by default AngularJS requires fields to have some user interaction to perform binding. Does anyone know how to force binding to the input field or else disable this in the angular? Thank you.

javascript cep angularjs

asked by anonymous 25.04.2016 / 16:00

3 answers

CSS - Align image inside table with inline css Differences in Constructors Using Property vs. Field

score 1 · Answer 1

Good morning Celso, why do not you change this algorithm that fills the html, and instead of the same sector the value for the input of the DOM you do not make it set the value directly to your variable "cadastro.endereco.endereco" of javascript.

This is sure to solve your problem.

I hope I have helped.

score 1 · Answer 2

The point is that you have to save this in your variable that does the field between your javascript and your html page.

In AngularJS we use the variable $scope to access it on the javascript side (inside your controller) while on the side of the page we have ng-model . For your part of the code I noticed that you already put ng-model in the page call, now what you have to ensure is that the past attributes are being saved in $scope .

What I suggest is that you change all Javaspcript assignments from the sample page to direct assignments to $scope instead of assigning some input to Id , it's just for that type of facility that AngularJS serves. Instead of your assignments being so:

document.getElementById('rua').value=(conteudo.logradouro);

They will stay that way

$scope.rua = conteudo.logradouro;

And the input field should be as follows:

<input name="rua" ng-model="rua" type="text" id="rua" size="60" /></label>

The correct thing would be to do this for all manipulated DOM variables instead of getting them by ID .

You can read more about $ scope in the links below:

Link 1

Link 2

score 1 · Answer 3

I changed $http.get to $getJSON and so it worked.

And in the inputs you do not need to repeat the model="cadastro.endereco.endereco" field. Only model="cadastro.endereco"

See below how it was:

  <input class="form-control" ng-model="p.localidade">
  <input class="form-control" ng-model="p.uf" >
  <input class="form-control" ng-model="p.bairro" >
  <input class="form-control" ng-model="p.logradouro" >

var app = angular.module("cep");
app.controller("buscaCEPCtrl",function($scope,$http){

    $scope.buscar = function(cep){
   //$http.get('https://viacep.com.br/ws/'+cep+'/json/').success(function(data){
    $.getJSON('https://viacep.com.br/ws/'+cep+'/json/').success(function(data){
            $scope.form = data;
                $scope.resCep= false;
        }).error(function(){
            $scope.resCep= true;
        });
    };
});