时间戳

首页 > 解决方案 > 在 ng-bootstrap angular5 中激活和停用模式弹出窗口

angular - 在 ng-bootstrap angular5 中激活和停用模式弹出窗口

问题描述

如何激活（可编辑）和停用（不可编辑） ng-bootstrap 模式弹出窗口？

我正在使用下面的 html 代码在单击按钮时弹出模式弹出窗口。我需要将其弹出并处于非活动状态，直到我将值设置为 true。

但我不知道该怎么做。请帮忙。提前致谢。 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <div>
  <button type="button" class="btn btn-info " data-toggle="modal" data-target="#myModal">Click to open</button>

  <!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">        
        <h4 class="modal-title"> Modal Box</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <p>Click OK </p>
        <input [(ngModel)]="name"><br>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
      </div>
    </div>

  </div>
</div>
</div>

标签： angularhtmlng-bootstrap

解决方案

您可以在名为“inactive”的组件中创建一个布尔变量，例如：

inactive: Boolean = true;

然后在输入中使用 Angular [disabled] 属性，如下所示：

  <div class="modal-body">
    <p>Click OK </p>
    <input [(ngModel)]="name"  [disabled]="inactive"><br>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal" [disabled]="inactive">Ok</button>
  </div>

通过这样做，如果您将非活动变量设置为 true，则模式弹出字段将处于非活动状态，否则它们不会。

推荐阅读