Question

我有plunker来表明我的问题。

用户点击“打开模态”后，会打开一个显示输入字段的模态。如果用户输入所有3个输入字段，则应关闭模态。这很好用。

现在，如果用户忘记提及任何一个字段，它会显示一条警告消息，告诉我们要在字段中输入值...在此消息之后，模式应保持打开状态。在我的情况下，它会在显示警报后关闭。

我试图从这里删除隐藏功能

ng-click="$hide();adduser()"

所以不是上面的，我尝试了这个

ng-click="adduser()"

这解决了这个问题。即，当其中一个字段丢失时，它会发出警报。但另一个问题出现在第一个场景中。用户输入所有3个值并点击“添加”后，模态不会关闭。因为我已经从ng-click中删除了hide（）功能。

有人能告诉我如何让这两个案件成为可能并且有效。

Answer 1

您可以简单地向表单添加验证，然后您可以禁用该按钮以防止用户点击按钮而不填写所有字段，如下所示：

ng-disabled="form.$invalid"

所以你可以在你的模态中有这样的东西：

<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">
        <form novalidate name="form">
          <div class="form-group">
            Select Sedol:
            <input name="select1" type="text" ng-model="selectedState" bs-options="state for state in states" placeholder="Enter state" ng-change="get_change(selectedState)" bs-typeahead required>
          </div>
          <div class="form-group">
            RestrName:&nbsp;&nbsp;
            <select name="select2" id="restrName" ng-model="selectedOption" ng-change="set_value(selectedOption)" required>
              <option value="sedol">sedol</option>
              <option value="cusip">cusip</option>
            </select>
          </div>

          <div class="form-group">
            RestrType:&nbsp;&nbsp;
            <select name="select3" id="restrType" ng-model="selectedOption1" ng-change="set_value1(selectedOption1)" required>
              <option value="NoBuy">NoBuy</option>
              <option value="NoSell">NoSell</option>
              <option value="NoHold">NoHold</option>
              <option value="NoTrade">NoTrade</option>
              <option value="NoincExp">NoincExp</option>
              <option value="NoDecExp">NoDecExp</option>
              <option value="NoHoldLong">NoHoldLong</option>
              <option value="NoHoldShort">NoHoldShort</option>
              <option value="NoCoverBuy">NoCoverBuy</option>
              <option value="NoSellShort">NoSellShort</option>
            </select>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" ng-disabled="form.$invalid" ng-click="$hide();adduser()">Add</button>
      </div>
    </div>
  </div>
</div>

DEMO

Answer 2

好吧，如果你想隐藏你的模态，就必须触发它。我不知道如何从你的控制器正确地做到这一点，你可以使用jquery从addUser（）方法中隐藏它。

更清洁的解决方案是使用https://angular-ui.github.io/bootstrap/#/modal 然后你可以以更好的方式以编程方式关闭它（以及更多）。

Answer 3

您应该使用控制器来管理模态的生命周期。我创建了一个新的plunker，向您展示如何执行此操作：

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

  $scope.detailsModal = $modal({ 
    scope: $scope,
    title: 'Enter details', 
    html: true, 
    show: false,
    templateUrl: 'modal/docs/modal.demo.tpl.html'
  });

  $scope.showModal = function() {
    $scope.detailsModal.show();
  }

  $scope.adduser = function() {
    if ($scope.selectedState && $scope.selectedOption && $scope.selectedOption1) {
      $scope.detailsModal.hide();
    }
    else {
      window.alert('please select all required fields');
    }
 }

仅在输入所有输入字段时关闭模态

3 个答案: