How can I set my Controller values for an Ionic / Angularjs form?

Asked

Viewed 601 times

1

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

I will illustrate:

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 auto fill 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>
  • 1

    var cep = resultado[3]; usuario.cep = cep;. Thus.

1 answer

3


As the directive already exists ng-model pointing to $scope.usuario.cep, you only need to assign a value to $scope.usuario.cep and let the 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>

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

Browser other questions tagged

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