2016-10-17 2 views
0

4 개의 선택 (드롭 다운 목록)이 포함 된 모달이 있는데 모달에서 해당 데이터의 값을 가져 와서 HTML의 4 개의 텍스트 입력에 표시하고 싶습니다.AngularJS : 모달에서 입력 텍스트로 데이터를 전달하는 방법

나는 어떻게해야할지 모르겠다. 이건 내 정상적인 컨트롤러 코드가

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

입니다 :

이 내 모달 "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 cargarDatosFiltrados(){ 
     $uibModal.open({ 
      templateUrl : 'app/modales/filtros.html', 
      controller : 'ControladorModales', 
      controllerAs: 'vm', 
      backdrop : 'static' 
     }).result.then(function(data){ 
      vm.guardando = true; 
     }); 
    } 

몇 가지 예를 들면?

미리 감사드립니다.

+0

안녕하세요, Dan 님, 안녕하세요. 모달을 구현하는 방법에 대해 좀 더 알려주세요. – theTaoOfJS

+0

안녕하세요. 내 게시물을 업데이트했습니다. :) –

답변

1

코드에 다음 문제가 있습니다.

  1. 나는 다시 부모 컨트롤러에 모든 값을 반환하지 않습니다 how to use select in angular
  2. aceptar() 방법의 예에서 당신의 선택 fields.Look의에 어떤 ng-model 속성을 볼 수 없습니다. 모달 창을 닫는 중입니다. 이 $uibModalInstance.close($scope.result);과 같은 값을 반환해야합니다.이 값에는 4 개의 값이 있습니다.
관련 문제