Question

我正在创建一个Web应用程序，其中有两个按钮。

第一次插入第二次更新在点击任何这些按钮时，我想打开一个模态，它运行良好。

单击（插入或更新后）

后，

模式加速

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

          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title"><p style="color:red; text-align:center;">Don't Leave Empty Field Please Fill 'N.A' There !!</p></h4>
            </div>
            <div class="modal-body">
<select>
<option>Insert Text Box</option>
<option>Update Text box</option>
</select>
<input type="text" name="insert">
<input type="text" name="update">
    </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default">Insert</button>
              <button type="button" class="btn btn-default">Update</button>
            </div>
          </div>

        </div>
      </div>

但是，如果用户点击insert中的update button或modal-footer必须为hide

并且在模式中如果用户选择下拉列表中的插入update textbox必须隐藏，如果用户选择更新insert textbox必须隐藏。

Answer 1

您需要将ng-click指令添加到两个按钮并添加关闭模式的方法，如下所示：

<button ng-click="closeModal()" type="button" class="btn btn-default">Insert</button>

您使用的模式很可能已经有了一种可用的方法。否则，您需要处理控制器中的关闭部分。

Answer 2

您应该在控制器的数据中保留信息，然后使用ngShow指令（doc）来显示其中一个。

以下是一个示例，如果您有一个名为 ctrl 的控制器，其中包含 updateModal 布尔值。

<button type="button" class="btn btn-default" ng-show="!ctrl.updateModal">Insert</button>
<button type="button" class="btn btn-default" ng-show="ctrl.updateModal">Update</button>

然后，当您打开模态时，您必须更新此布尔值。

Answer 3

您可以使用范围变量来跟踪最后按下的按钮，并使用ngShow仅显示所需的按钮。

但是，如果您有可能最终进一步自定义模态对话框，那么它将变得混乱。如果我是你，我会牺牲一点打字并创建两个模态对话框。然后，我有动作按钮显示每个相关的模态。

angularJS隐藏按钮和文本框

3 个答案: