Question

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

我有以下附带的附件

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

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

用户点击“添加用户”后，会打开一个模态。我们开始在第一个输入字段中输入名称。如果我们输入字母＆＃39; a＆＃39;，则自动填充功能会显示选项。我们选择Angular并选择＆＃39; Scope＆＃39;并且＆＃39;观看＆＃39;来自其他2个下拉输入值。

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

Answer 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中的完整代码。

有关AngularStrap中{em> typeaheads 的详情，请查看here。

将数据从模态传递到主控制器 - （附带Plunker）----包含模态内的自动完成输入框

1 个答案: