将数据从模态传递到主控制器-（附有柱塞）----在模态内部包含自动完成输入框

Question

My situation is slightly different than passing normal data from modal to main controller. 我的情况与将正常数据从模态传递到主控制器略有不同。 my input field in modal contains an autocomplete box. 我的模式输入字段包含一个自动完成框。

I have the following plunker attached herewith 随函附上以下随身听

http://plnkr.co/edit/lpcg6pPSbspjkjmpaX1q?p=preview http://plnkr.co/edit/lpcg6pPSbspjkjmpaX1q?p=预览

$scope.ok = function() {
          $modalInstance.close();
};

Once user clicks on 'Add User', a modal opens. 用户单击“添加用户”后，将打开一个模式。 We start entering name in the first input field. 我们开始在第一个输入字段中输入名称。 if we type letter 'a', autocomplete feature shows the options. 如果我们输入字母“ a”，则自动完成功能将显示选项。 We select Angular and select 'Scope' and 'Watch' from other 2 dropdown input values. 我们选择Angular，然后从其他2个下拉输入值中选择“ Scope”和“ Watch”。

Now, we press 'ok'. 现在，我们按“确定”。 Can someone tell me how to pass the above selected values in the modal to the controller. 有人可以告诉我如何将模态中的上述选定值传递给控制器。

Answer 1

You can use AngularStrap modals , which I personally prefer because the data manipulation is easier, in my opinion. 您可以使用AngularStrap模态 ，我个人更喜欢，因为我认为数据操作更容易。

Here's code: 这是代码：

JS: JS：

angular.module('app', ['ngAnimate', 'ngSanitize', 'mgcrea.ngStrap'])

.config(function($modalProvider) {
  angular.extend($modalProvider.defaults, {
    html: true
  });
})

.controller('mainCtrl', function($scope, $rootScope, $modal) {
  $scope.selectedState = '';
  $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];

  $scope.modal = {
    title: "<strong>Example</strong>",
    html: true,
    show: true
  };

  $scope.get_change = function(value) {
      $scope.selectedState = value;
  }
});

HTML: HTML：

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-animate.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-sanitize.min.js" data-semver="1.5.7"></script>
  <script src="https://mgcrea.github.io/angular-strap/dist/angular-strap.js"></script>
  <script src="https://mgcrea.github.io/angular-strap/dist/angular-strap.tpl.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
  <link rel="stylesheet" href="https://mgcrea.github.io/angular-strap/styles/libs.min.css">
  <link rel="stylesheet" href="https://mgcrea.github.io/angular-strap/styles/docs.min.css">
</head>

<body ng-controller="mainCtrl">
  <div class="col-md-6">
    <button type="button" class="btn btn-md btn-primary" data-animation="am-flip-x" data-template-url="modal/docs/modal.demo.tpl.html" data-placement="center" bs-modal="modal">Open modal
    </button>
    <hr>
    <span ng-bind="selectedState"></span>
  </div>
</body>

</html>

<!-- Modal content

<div class="modal ng-scope center am-fade-and-scale" tabindex="-1" role="dialog" aria-hidden="true" style="z-index: 1050; display: block;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header" ng-show="title">
        <button type="button" class="close" aria-label="Close" ng-click="$hide()"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" ng-bind-html="title"></h4></div>
      <div class="modal-body">
        <div class="form-group">
          <label><i class="fa fa-globe"></i> State</label>
          <input type="text" class="form-control" ng-model="selectedState" bs-options="state for state in states" placeholder="Enter state" ng-change="get_change(selectedState)" bs-typeahead>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
      </div>
    </div>
  </div>
</div>

-->

You can check the complete code in plnkr . 您可以在plnkr中检查完整的代码。

For more info about typeaheads in AngularStrap check here . 有关typeaheads更多信息AngularStrap检查这里。

将数据从模态传递到主控制器-（附有柱塞）----在模态内部包含自动完成输入框

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-07-07 02:17:06

将数据从模态传递到主控制器-（附有柱塞）----在模态内部包含自动完成输入框

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-07-07 02:17:06

解决方案1
1 已采纳 2016-07-07 02:17:06