Question

如何激活（可编辑）和停用（不可编辑）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>

Answer 1

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

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，则模式弹出字段将处于非活动状态，否则它们将不会。

激活和停用ng-bootstrap angular5

1 个答案: