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