AngularJS：如何将数据从模态传递到输入文本答案

【问题标题】：AngularJS: How to passing data from modal to input textAngularJS：如何将数据从模态传递到输入文本
【发布时间】：2016-10-17 14:09:38
【问题描述】：

我有一个包含 4 个选择（下拉列表）的模式，我想从模式中获取该数据的值，并将它们显示在我的 html 中的 4 个文本输入中。

我不知道怎么做。

这是我的模态“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>

这是我的模态控制器：

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

这是我的普通控制器代码：

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

举个例子？

提前致谢。

【问题讨论】：

嗨，Dan，你需要告诉我们更多关于你是如何实现模态的
嗨，我更新了我的帖子:)

标签： html angularjs input modal-dialog dropdown

【解决方案1】：

我发现您的代码存在以下问题。

我在您的任何选择字段上都没有看到任何ng-model 属性。请看这个how to use select in angular 的示例
aceptar() 方法没有将任何值返回给父控制器。您只是关闭模式窗口。您必须返回类似 $uibModalInstance.close($scope.result); 的内容，其中包含 4 个选定值。

【讨论】：