How can I set values from my Controller for a form in Ionic / Angular Js?

Question

How can I set values from my Controller for a form in Ionic / Angular Js?

Navigation

#1 by (3 votes)

1

I have data in my controller that I want to play on my form. How can I play this data for my form?

I'll give you an example:

My controller data is these variables:

$scope.endereco_gps = window.localStorage.getItem("endereco_gps");

var resultado = $scope.endereco_gps.split(',');
var rua = resultado[0];
var bairro = resultado[1];
var cidade_estado = resultado[2];
var cep = resultado[3];

As you can see, they are from a registration form, I would like to fill in these fields with these results.

My form looks something like this:

<label class="item item-input item-floating-label"> 
    <span class="input-label">CEP</span>
    <input type="number"class="form_control" ng-model="usuario.cep" name="cep_temp" placeholder="CEP"  />
    <span class="assertive" ng-show="formCadastroUser.cep.$invalid && formCadastroUser.cep.$dirty">Digite o CEP.</span>
</label>

<label class="item item-input item-floating-label">
    <span class="input-label">Endereço</span>
    <input type="text" class="form_control" ng-model="usuario.endereco" name="endereco" placeholder="Endereço" ng-required="true" />
    <span class="assertive" ng-show="formCadastroUser.endereco.$invalid && formCadastroUser.endereco.$dirty">Digite seu endereço.</span>
</label>

<label class="item item-input item-floating-label">
    <span class="input-label">Número</span>
    <input type="text" ng-model="usuario.numero" name="numero" placeholder="Número" ng-required="true" />
    <span class="assertive" ng-show="formCadastroUser.numero.$invalid && formCadastroUser.numero.$dirty">Digite o número de seu endereço.</span>
</label>

<label class="item item-input item-floating-label">
    <span class="input-label">Complemento.</span>
    <input type="text" class="form_control" ng-model="usuario.complemento" name="complemento" placeholder="Digite o complemento de seu endereço." />
</label>

<label class="item item-input item-floating-label">
    <span class="input-label">Bairro</span>
    <input type="text" class="form_control" ng-model="usuario.bairro" name="bairro" placeholder="Bairro" />
    <span class="assertive" ng-show="formCadastroUser.bairro.$invalid && formCadastroUser.bairro.$dirty">Campo obrigatório.</span>
</label>

<label class="item item-input item-floating-label">
    <span class="input-label">Cidade e Estado</span> 
    <input type="text" class="form_control" ng-model="usuario.cidade" name="cidade" placeholder="Cidade e Estado" />
    <span class="assertive" ng-show="formCadastroUser.cidade.$invalid && formCadastroUser.cidade.$dirty">Campo obrigatório.</span>
</label>

javascript angularjs ionic

asked by anonymous 17.04.2017 / 14:02

1 answer

$ .find () method in pure javascript Android - Invalid Resource Directory Name

score 3 · Accepted Answer

Since the ng-model directive already exists for $scope.usuario.cep , you only have to assign a value to $scope.usuario.cep and let two-way data binding do your magic.

angular.module('teste-app', []);

angular.module('teste-app').controller('mainController', mainControllerFn);

function mainControllerFn($scope){
  var resultado = ['Rua teste', 'Centro', 'Cidade-ES', 8888887];

  var cep = resultado[3];

  $scope.usuario = {};
  $scope.usuario.cep = cep;      
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-app="teste-app" ng-controller="mainController as mainCtrl">      
  <label class="item item-input item-floating-label">
    <span class="input-label">CEP</span>
    <input type="number"class="form_control" ng-model="usuario.cep" name="cep_temp" placeholder="CEP"  />
    <span class="assertive" ng-show="formCadastroUser.cep.$invalid && formCadastroUser.cep.$dirty">Digite o CEP.</span>
  </label>
</div>