将数据从模态传递到主控制器-（附有 Plunker）----在模态中包含自动完成输入框答案

【问题标题】：Pass data from modal to main controller- (Plunker attached)----contains autocomplete input box inside a modal将数据从模态传递到主控制器-（附有 Plunker）----在模态中包含自动完成输入框
【发布时间】：2016-11-09 04:34:55
【问题描述】：

我的情况与将普通数据从模态传递到主控制器略有不同。我在模式中的输入字段包含一个自动完成框。

我附上了以下小工具

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

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

一旦用户点击“添加用户”，就会打开一个模式。我们开始在第一个输入字段中输入名称。如果我们输入字母“a”，自动完成功能会显示选项。我们选择 Angular 并从其他 2 个下拉输入值中选择 'Scope' 和 'Watch'。

现在，我们按“确定”。谁能告诉我如何将模态中的上述选定值传递给控制器。

【问题讨论】：

看看：plnkr.co/edit/xyOSVrxLnAtSpjZ8kdlm?p=preview 来自这个答案：stackoverflow.com/questions/26570653/…
@developer033- 我的问题略有不同。我在模态框内有自动完成输入框。我没有找到将其从模态传递到控制器的方法。选择名称输入框是自动完成的。
@developer033- 你能告诉我如何获取自动完成输入字段的值吗？即选择名称。对于这种类型的输入，我在 plunker 中找不到它
我尝试在模式中查找预输入。但找不到任何可行的解决方案。

标签： javascript jquery angularjs autocomplete modal-dialog

【解决方案1】：

您可以使用AngularStrap modals，我个人更喜欢它，因为我认为数据操作更容易。

代码如下：

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：

<!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>

-->

您可以在plnkr查看完整代码。

有关 typeaheads 的更多信息，请查看 AngularStrap here。

【讨论】：

@developer033- plnkr.co/edit/Vc7v55be6jnUTumVJZXR?p=preview 你能检查一下这个 plunker。我有一个小小的疑问。我在 modal 中又添加了一个输入框。你能告诉我如何从模态到控制器获取这个值吗？
我在这里分叉了你的 plnkr：plnkr.co/edit/2RiVwNmdauwrbCD7dkPe?p=preview。顺便说一句，你为什么取消选中我的答案是正确的？？？
谢谢。我会看看plunker。我以为我已将其标记为已接受的答案。将再次检查。顺便说一句，这是在模式中合并自动完成功能的最简单方法。感谢您迄今为止的所有投入。
@developer033- 我这里还有一个转折点。 plnkr.co/edit/YeEY512UxEO58gWfKOtK?p=preview 一旦用户点击模态，输入值并按下“添加”，有两个功能需要执行。第一个是关闭模式，第二个是运行另一个功能。我无法运行其他功能。你能看看吗。 ng-click="$hide() 运行()"。 run() 是我尝试执行的另一个函数
只需在两个方法之间插入一个分号 (;)，例如：ng-click="$hide();run()"。