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

Question

我有一个包含 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;
        });
    }

一些例子？

提前致谢。

Answer 1

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

在这个 how to use select in angular

ng-model

aceptar() 方法不会 return 将任何值返回给父控制器。您只是关闭模态 window。你必须 return 类似 $uibModalInstance.close($scope.result); 的东西，它有 4 个 selected 值。

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

AngularJS: How to passing data from modal to input text

html

input

modal-dialog

angularjs

dropdown