concatenar ng models

publicado por: Anonymous

quiero concatenar todos los datos que ingreso cuando pido la direccion para enviarlos a un ng-model de la forma eje(carrera 20 # 19 107) este es mi formulario donde pido los datos en inputs por separados, la idea es enviarlos a un solo 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>

todo quiero enviarlo al ng-model='Direccion.address'
esta es la parte del controlador donde la trato de asignar

$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 = "" 

solución

Tu error es que mantienes oculto siempre

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

Debes eliminar el style="display: none !important;" y reemplazarlo por

ng-show="verAddress"

En tu controlador algo asi :

FORMA 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;
 }

Quedando tu formulario algo asi :

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

Esta es una opcion, si es que tienes un boton que haga una accion y quieras ver el cambio, SI QUIERES ver el cambio de inmediato una vez que esten todos los campos completados, basta con utilizar el tag ng-change="updateAddress()"

FORMA 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>

Y en tu controlador

$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);
  };
 })
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *