concatenar ng models

0

I want to concatenate all the data I entered when I ask for the address to send them to a ng-model of the axis form (career 20 # 19 107) this is my form where I request the data in separate inputs, the idea is to send them to a single ng-model

<select style=" border:0px; background-color: white !important" ng-model="Direccion.Nomenclatura">
    <option ng-if="!direccion_nomenclatura">Seleccione</option>
    <option>Calle</option>
    <option selected>Carrera</option>
    <option>Transversal</option>
    <option>Diagonal</option>
    <option>Avenida</option>
    <option>Autopista</option>
</select>
<input type="text" placeholder="10" ng-model="Direccion.principal" name="principa" id="principa" class="imptsDir">
<p style="display: inline;">#</p>
<input type="text" placeholder="34" ng-model="Direccion.numero" name="numero" id="numero" class="imptsDir">
<p style="display: inline;">-</p>
<input type="text" placeholder="19" ng-model="Direccion.numero1" name="numero1" id="numero1" class="imptsDir">
<input type="text" placeholder="19" ng-model='Direccion.address' style="display: none !important;" name="address" id="address" class="imptsDir">
<label class="item item-input" style="    padding-left: 0px; border-top-width: 0px;">
    <span class="input-label">Info Adicional</span>
    <input type="text" Placeholder="Apto, casa , bloque etc" ng-model="Direccion.aditional_info" name="info" id="info" style="border-bottom: solid 1px grey !important; margin-right: 30px; padding: 0px;">
</label>

I want to send everything to ng-model='Direccion.address'
this is the part of the controller where I try to assign

$scope.Direccion = {}  
$scope.Direccion.city_id = ""  
$scope.Direccion.address = $scope.Direccion.Nomenclatura +" "+ $scope.Direccion.numero +" #  "+ $scope.Direccion.numero1 +" - "+$scope.Direccion.aditional_info;  
$scope.Direccion.aditional_info = "" 
    
asked by ingFR 26.10.2016 в 02:04
source

3 answers

0

Your mistake is that you keep hidden always

<input type="text" placeholder="19" ng-model='Direccion.address' style="display: none !important;" name="address" id="address" class="imptsDir">

You must remove style="display: none !important;" and replace it with

ng-show="verAddress"

On your controller something like this:

FORM 1

 $scope.verAddress = false;
 $scope.enviar = function() {
     console.log($scope.Direccion);
     $scope.Direccion.address = $scope.Direccion.Nomenclatura + " " + $scope.Direccion.numero + " #  " + $scope.Direccion.numero1 + " - " + $scope.Direccion.aditional_info;
     $scope.verAddress = true;
 }

Your form remains something like this:

<select style=" border:0px; background-color: white !important" ng-model="Direccion.Nomenclatura">
    <option ng-if="!direccion_nomenclatura">Seleccione</option>
    <option>Calle</option>
    <option selected>Carrera</option>
    <option>Transversal</option>
    <option>Diagonal</option>
    <option>Avenida</option>
    <option>Autopista</option>
</select>
<input type="text" placeholder="10" ng-model="Direccion.principal" name="principa" id="principa" class="imptsDir">
<p style="display: inline;">#</p>
<input type="text" placeholder="34" ng-model="Direccion.numero" name="numero" id="numero" class="imptsDir">
<p style="display: inline;">-</p>
<input type="text" placeholder="19" ng-model="Direccion.numero1" name="numero1" id="numero1" class="imptsDir">
<input type="text" placeholder="19" ng-model='Direccion.address' ng-show="verAddress" name="address" id="address" class="imptsDir">
<label class="item item-input" style="    padding-left: 0px; border-top-width: 0px;">
    <span class="input-label">Info Adicional</span>
    <input type="text" Placeholder="Apto, casa , bloque etc" ng-model="Direccion.aditional_info" name="info" id="info" style="border-bottom: solid 1px grey !important; margin-right: 30px; padding: 0px;">
</label>
<input button ng-click="enviar()" value="Enviar"></input>

This is an option, if you have a button that makes an action and you want to see the change, IF YOU WANT to see the change immediately once all the fields are complete, just use the tag ng-change="updateAddress()"

FORM 2

<select style=" border:0px; background-color: white !important" ng-change="updateAddress()" ng-model="Direccion.Nomenclatura">
    <option ng-if="!direccion_nomenclatura">Seleccione</option>
    <option>Calle</option>
    <option selected>Carrera</option>
    <option>Transversal</option>
    <option>Diagonal</option>
    <option>Avenida</option>
    <option>Autopista</option>
</select>
<input type="text" placeholder="10" ng-model="Direccion.principal" name="principa" id="principa" class="imptsDir">
<p style="display: inline;">#</p>
<input type="text" placeholder="34" ng-change="updateAddress()" ng-model="Direccion.numero" name="numero" id="numero" class="imptsDir">
<p style="display: inline;">-</p>
<input type="text" placeholder="19" ng-change="updateAddress()" ng-model="Direccion.numero1" name="numero1" id="numero1" class="imptsDir">
<input type="text" placeholder="19" ng-model='Direccion.address' ng-show="verAddress" name="address" id="address" class="imptsDir">
<label class="item item-input" style="    padding-left: 0px; border-top-width: 0px;">
    <span class="input-label">Info Adicional</span>
    <input type="text" ng-change="updateAddress()" Placeholder="Apto, casa , bloque etc" ng-model="Direccion.aditional_info" name="info" id="info" style="border-bottom: solid 1px grey !important; margin-right: 30px; padding: 0px;">
</label>

And on your controller

$scope.verAddress = false;
$scope.Direccion = {};
$scope.Direccion.Nomenclatura = "";
$scope.Direccion.numero = "";
$scope.Direccion.numero1 = "";
$scope.Direccion.aditional_info = "";
$scope.updateAddress= function() {
if ($scope.Direccion.Nomenclatura != "" && $scope.Direccion.numero != "" && $scope.Direccion.numero1 != "" && $scope.Direccion.aditional_info != "") {
    $scope.Direccion.address = $scope.Direccion.Nomenclatura + " " + $scope.Direccion.numero + " #  " + $scope.Direccion.numero1 + " - " + $scope.Direccion.aditional_info;
    $scope.verAddress = true;
}

EDIT

CODEPEN

EDIT 2

.controller('registrarDireccionCtrl', function($scope, $http, $q, Users, $ionicLoading, $ionicPopup, ionicToast, $rootScope, AUTH_EVENTS) {

  $http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
  $scope.Direccion = {};
  $scope.Direccion.Nomenclatura = "";
  $scope.Direccion.numero = "";
  $scope.Direccion.numero1 = "";
  $scope.Direccion.aditional_info = "";
  $scope.Direccion.token = localStorage.getItem("token");

  $scope.updateAddress= function() {
      if ($scope.Direccion.Nomenclatura != "" && $scope.Direccion.numero != "" && $scope.Direccion.numero1 != "" && $scope.Direccion.aditional_info != "") {
      $scope.Direccion.address = $scope.Direccion.Nomenclatura + " " + $scope.Direccion.numero + " #  " + $scope.Direccion.numero1 + " - " + $scope.Direccion.aditional_info;
      }
  }

  var id = localStorage.getItem('user_id')
  var urlr = "http://abbie-core.herokuapp.com/api/users/" + id + "/addresses/new"

  $scope.registrarDireccion = function() {
      $scope.showLoadingProperTimes = function() {
          $ionicLoading.show({
              templateUrl: "templates/registro.html"
          });
      };
      $scope.showLoadingProperTimes();
      Users.registrarDireccion($scope.Direccion, urlr).then(function(argument) {

          console.log(argument)
          $ionicLoading.hide({});
          $scope.showToastRegDir();

      })
  };
  $scope.showToastRegDir = function() {
      ionicToast.show('Registro exitoso', 'bottom', false, 3000);
  };
 })
    
answered by 26.10.2016 / 13:01
source
0

Assuming that in your controller you access the ng-model using the $scope.Direccion , you simply concatenate the data when you process it there in the following way:

$scope.Direccion.address = $scope.Direccion.address + $scope.Direccion.numero + $scope.Direccion.numero1 + $scope.Direccion.aditional_info;
    
answered by 26.10.2016 в 02:34
0

this is my driver @sioesi

    .controller('registrarDireccionCtrl', function($scope, $http, $q, Users, $ionicLoading, $ionicPopup, ionicToast, $rootScope, AUTH_EVENTS) {

    $http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
    $scope.Direccion = {}
    $scope.Direccion.city_id = ""
    $scope.Direccion.principal = "";
    $scope.Direccion.Nomenclatura = "";
    $scope.Direccion.numero = "";
    $scope.Direccion.numero1 = "";
    $scope.Direccion.aditional_info = "";
    $scope.Direccion.address="";
    $scope.Direccion.token = localStorage.getItem("token");

    var id = localStorage.getItem('user_id')
    var urlr = "http://abbie-core.herokuapp.com/api/users/" + id + "/addresses/new"

    $scope.registrarDireccion = function() {
         if ($scope.Direccion.principal != "" && $scope.Direccion.Nomenclatura != "" && $scope.Direccion.numero != "" && $scope.Direccion.numero1 != "" ) {
      $scope.Direccion.address = $scope.Direccion.Nomenclatura + " " + $scope.Direccion.principal + " # " + $scope.Direccion.numero + " - " + $scope.Direccion.numero1;
      }
        $scope.showLoadingProperTimes = function() {
            $ionicLoading.show({
                templateUrl: "templates/registro.html"
            });
        };
        $scope.showLoadingProperTimes();
        Users.registrarDireccion($scope.Direccion, urlr).then(function(argument) {

            console.log(argument)
            $ionicLoading.hide({});
            $scope.showToastRegDir();

        })
    };
    $scope.showToastRegDir = function() {
        ionicToast.show('Registro exitoso', 'bottom', false, 3000);
    };
})
    
answered by 26.10.2016 в 13:22