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

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

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

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

1 个答案: