AngularJS: How to passing data from modal to input text

Question

I have a modal which contains 4 selects (dropdown lists) and I want to get the value of that data from the modal and display them in 4 text inputs in my html.

I do not know how.

this is my modal "filtros.html"

<div><div class="modal-header">
<h4 class="modal-title"><i class="fa fa-filter"></i> Más filtros</h4>
</div>

<div class="modal-body">
<div class="form-group">
    <label for="cliente" >Cliente:</label>
    <select id="cliente" class="form-control input-sm" >
        <option value="0"></option> 
        <option ng-repeat="cliente in listaFiltros.clientes" value="{{ cliente }}">{{ cliente }}</option>   
    </select>
</div>
<div class="form-group">
    <label for="producto">Producto:</label>
    <select id="producto" class="form-control input-sm">
        <option value="0"></option> 
        <option ng-repeat="producto in listaFiltros.productos" value="{{ producto }}">{{ producto }}</option>
    </select>
</div>
<div class="form-group">
    <label for="origen">Origen:</label>
    <select id="origen" class="form-control input-sm">
        <option value="0"></option> 
        <option ng-repeat="origen in listaFiltros.origenes" value="{{ origen }}">{{ origen }}</option>
    </select>
</div>
<div class="form-group">
    <label for="destino">Destino:</label>
    <select id="destino" class="form-control input-sm">
        <option value="0"></option> 
        <option ng-repeat="destino in listaFiltros.destinos" value="{{ destino }}">{{ destino }}</option>
    </select>
</div>

<div class="modal-footer">
<button type="button" class="btn btn-sm btn-primary" ng-click="vm.aceptar()">
    <i class="fa fa-check"></i> Aplicar filtros
</button>

<button type="button" class="btn btn-sm btn-default" ng-click="vm.cancelar()">
    <i class="fa fa-remove"></i> Cancelar
</button>

This is my modal controller:

(function() {
'use strict';

angular
.module('app.modales')
.controller('ControladorModales', ControladorModales);

ControladorModales.$inject = ['$scope', 'servicioTablasDinamicas','$uibModalInstance'];

function ControladorModales($scope, servicioTablasDinamicas, $uibModalInstance){
    var vm = this;

    vm.aceptar  = aceptar;
    vm.cancelar = cancelar;

    $scope.listaFiltros = {
        clientes: [],
        productos: [],
        origenes: [],
        destinos: []
    };

    servicioTablasDinamicas.cargarClientes()
    .then(function(data){
        $scope.listaFiltros.clientes = data;
    });
    servicioTablasDinamicas.cargarProductos()
    .then(function(data){
        $scope.listaFiltros.productos = data;
    });
    servicioTablasDinamicas.cargarOrigen()
    .then(function(data){
        $scope.listaFiltros.origenes = data;
    });
    servicioTablasDinamicas.cargarDestino()
    .then(function(data){
        $scope.listaFiltros.destinos = data;
    });

    function aceptar(){
        $uibModalInstance.close();
    }

    function cancelar(){
        $uibModalInstance.dismiss('cancel');
    }
}
})();

This is my normal controller code:

function cargarDatosFiltrados(){
        $uibModal.open({
            templateUrl : 'app/modales/filtros.html',
            controller  : 'ControladorModales',
            controllerAs: 'vm',
            backdrop    : 'static'
        }).result.then(function(data){
            vm.guardando = true;
        });
    }

some example?

Thanks in advance.

Hi Dan, you need to tell us a bit more about how you are implementing the modal — theTaoOfJS
– theTaoOfJS, Commented Oct 17, 2016 at 14:12

Gowthaman · Accepted Answer · 2016-10-17 17:11:54Z

2

I see the following issues with your code.

I don't see any ng-model attribute on any of your select fields.Look at this example of how to use select in angular
aceptar() method is not returning any values back to the parent controller. You're just closing the modal window. You have to return something like this $uibModalInstance.close($scope.result); which has the 4 selected values.

answered Oct 17, 2016 at 17:11

Gowthaman

1,3021 gold badge9 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS: How to passing data from modal to input text

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related