0

我尝试了几件事但没有奏效,我需要通过隐藏模式弹出窗口或任何其他方式在模式弹出窗口上打开一个模式弹出窗口。根据我的应用程序结构,我也无法注入控制器实例。任何帮助都将不胜感激。

如下所示,当我单击添加停止按钮时,会打开一个新模式,并且此弹出模式应该隐藏或关闭并再次打开。

<div class="modal fade" id="editModal" 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">Update Route Details</h4>
    </div>
    <div class="modal-body">

        <form class="well form-horizontal" name="updateRouteForm">
            <fieldset>
                <!-- Route ID-->
                <div class="form-group">
                    <label class="control-label">Route ID</label>
                    <div class="inputGroupContainer">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-edit"></i></span>
                            <input name="routeId" value="{{popupData.routeId}}" class="form-control" disabled>
                        </div>
                    </div>
                </div>
                <!-- Route Name-->
                <div class="form-group">
                    <label class="control-label">Route Name</label>
                    <div class="inputGroupContainer">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                            <input name="route" class="form-control" type="text" ng-model="popupData.route" value="{{popupData.route}}" required>
                        </div>
                    </div>
                </div>
                <!-- Description-->
                <div class="form-group">
                    <label class="control-label">Route Description</label>
                    <div class="inputGroupContainer">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-phone"></i></span>
                            <input name="description" ng-model="popupData.description" value="{{popupData.description}}" class="form-control" type="text" required maxlength="10">
                        </div>
                    </div>
                </div>
                <!-- Route distance-->
                <div class="form-group">
                    <label class="control-label">Route Distance</label>
                    <div class="inputGroupContainer">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-road"></i></span>
                            <input name="distance" ng-model="popupData.distance" value="{{popupData.distance}}" class="form-control" type="number" step="00.01" required>
                        </div>
                    </div>
                </div>


                <br /><br />

                <!-- Display Stoppage Data -->
                <div align="center" class="form-group-sm">

                    <table id="stoppageTable" class="table table-striped table-hover table-bordered table-xs ">
                        <thead>
                            <tr>
                                <th class="btn-info">serialNo</th>
                                <th class="btn-info">Stoppage Name</th>
                                <th class="btn-info">Description</th>
                                <th class="btn-info">Route order</th>
                                <th class="btn-info">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="stoppage in StoppageData">
                                <td>{{ stoppage.orderId }}</td>
                                <td>{{ stoppage.stoppageName }}</td>
                                <td>{{ stoppage.description }}</td>
                                <td>
                                    <div class="floating-buttons" align="center">
                                        <button type="button" name="moveUpButton" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#moveUpModal" ng-click="r.ForMoveUp($index)" data-toggle="tooltip" data-placement="bottom" title="MoveUP"><i class="glyphicon glyphicon-triangle-top"></i></button>
                                        <button type="button" name="moveDownButton" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#moveDownModal" ng-click="r.ForMoveDown($index)" data-toggle="tooltip" data-placement="top" title="MoveDown"><i class="glyphicon glyphicon-triangle-bottom"></i></button>
                                    </div>
                                </td>
                                <td>
                                    <div class="floating-buttons" align="center">
                                        <button type="button" name="deleteStoppage" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteStoppage" ng-click="r.setValuesForStoppageModal(stoppage,$index)" data-toggle="tooltip" data-placement="bottom" title="DeleteStoppage"><i class="glyphicon glyphicon-trash"></i></button>

                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </fieldset>
        </form>
    </div>
        <div class="modal-footer">
            <button type="button" name="addButton" class="btn btn-info" data-toggle="modal" data-target="#addModal" title="Add" ng-click="closeUpdate()">Add Stoppage</button>
            <button type="button" class="btn btn-success" data-dismiss="modal" ng-click="r.updateRoute(popupData)">Update</button>
            <button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
        </div>
    </div>
  </div>

</div>

AddStoppage 弹出代码:

<div class="modal fade" id="addModal" 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" align="center">Add Stoppage</h4>
            </div>
            <div class="modal-body">

                <!--<form class="well form-horizontal" name="addStoppageForm" ng-submit="r.addstoppageRow()">-->
                <form class="well form-horizontal" id="addStoppageForm">
                    <fieldset>
                        <!-- Stoppage Name-->
                        <div class="form-group">
                            <label class="control-label">Stoppage Name</label>
                            <div class="inputGroupContainer">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-road"></i></span>
                                    <input name="stoppageName" ng-model="stoppage.stoppageName" placeholder="Stoppage Name" class="form-control" type="text" required>
                                </div>
                            </div>
                        </div>

                        <!-- Stoppage Description-->
                        <div class="form-group">
                            <label class="control-label"> Description</label>
                            <div class="inputGroupContainer">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
                                    <textarea name="stoppageDescription" ng-model="stoppage.stoppageDescription" placeholder="Stoppage Description" class="form-control" type="text" required></textarea>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </form>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-warning pull-left" value="addStoppage" data-dismiss="modal" ng-click="r.addStoppageRow(stoppage)">Submit</button>
                <button type="button" class="btn btn-info pull-right" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>

</div>
4

1 回答 1

0

理想情况下,引导程序不支持多级模式。您必须通过 JavaScript 手动/以编程方式进行;在您的控制器中为您的情况。

您可以创建一个标志变量以向模态主体添加更多的 CSS。当有多个标志时,该标志可以处于活动状态。

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editModal">One</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#addModal">Two</button>
<div class="modal fade" id="editModal" role="dialog" ng-style="{display: hide ? 'none': 'block'}">
   <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">Update Route Details</h4>
      </div>
      <div class="modal-body">

        <form class="well form-horizontal" name="updateRouteForm">
          <fieldset>
            <!-- Route ID-->
            <div class="form-group">
              <label class="control-label">Route ID</label>
              <div class="inputGroupContainer">
                <div class="input-group">
                  <span class="input-group-addon"><i class="glyphicon glyphicon-edit"></i></span>
                  <input name="routeId" value="{{popupData.routeId}}" class="form-control" disabled>
                </div>
              </div>
            </div>
            <!-- Route Name-->
            <div class="form-group">
              <label class="control-label">Route Name</label>
              <div class="inputGroupContainer">
                <div class="input-group">
                  <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                  <input name="route" class="form-control" type="text" ng-model="popupData.route" value="{{popupData.route}}" required>
                </div>
              </div>
            </div>
            <!-- Description-->
            <div class="form-group">
              <label class="control-label">Route Description</label>
              <div class="inputGroupContainer">
                <div class="input-group">
                  <span class="input-group-addon"><i class="glyphicon glyphicon-phone"></i></span>
                  <input name="description" ng-model="popupData.description" value="{{popupData.description}}" class="form-control" type="text" required maxlength="10">
                </div>
              </div>
            </div>
            <!-- Route distance-->
            <div class="form-group">
              <label class="control-label">Route Distance</label>
              <div class="inputGroupContainer">
                <div class="input-group">
                  <span class="input-group-addon"><i class="glyphicon glyphicon-road"></i></span>
                  <input name="distance" ng-model="popupData.distance" value="{{popupData.distance}}" class="form-control" type="number" step="00.01" required>
                </div>
              </div>
            </div>


            <br /><br />

            <!-- Display Stoppage Data -->
            <div align="center" class="form-group-sm">

              <table id="stoppageTable" class="table table-striped table-hover table-bordered table-xs ">
                <thead>
                  <tr>
                    <th class="btn-info">serialNo</th>
                    <th class="btn-info">Stoppage Name</th>
                    <th class="btn-info">Description</th>
                    <th class="btn-info">Route order</th>
                    <th class="btn-info">Action</th>
                  </tr>
                </thead>
                <tbody>
                  <tr ng-repeat="stoppage in StoppageData">
                    <td>{{ stoppage.orderId }}</td>
                    <td>{{ stoppage.stoppageName }}</td>
                    <td>{{ stoppage.description }}</td>
                    <td>
                      <div class="floating-buttons" align="center">
                        <button type="button" name="moveUpButton" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#moveUpModal" ng-click="r.ForMoveUp($index)" data-toggle="tooltip" data-placement="bottom" title="MoveUP"><i class="glyphicon glyphicon-triangle-top"></i></button>
                        <button type="button" name="moveDownButton" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#moveDownModal" ng-click="r.ForMoveDown($index)" data-toggle="tooltip" data-placement="top" title="MoveDown"><i class="glyphicon glyphicon-triangle-bottom"></i></button>
                      </div>
                    </td>
                    <td>
                      <div class="floating-buttons" align="center">
                        <button type="button" name="deleteStoppage" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteStoppage" ng-click="r.setValuesForStoppageModal(stoppage,$index)" data-toggle="tooltip" data-placement="bottom" title="DeleteStoppage"><i class="glyphicon glyphicon-trash"></i></button>

                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </fieldset>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" name="addButton" class="btn btn-info" data-toggle="modal" data-target="#addModal" title="Add" ng-click="hide=true;closeUpdate()">Add Stoppage</button>
        <button type="button" class="btn btn-success" data-dismiss="modal" ng-click="r.updateRoute(popupData)">Update</button>
        <button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="addModal" 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" align="center">Add Stoppage</h4>
      </div>
      <div class="modal-body">

        <!--<form class="well form-horizontal" name="addStoppageForm" ng-submit="r.addstoppageRow()">-->
        <form class="well form-horizontal" id="addStoppageForm">
          <fieldset>
            <!-- Stoppage Name-->
            <div class="form-group">
              <label class="control-label">Stoppage Name</label>
              <div class="inputGroupContainer">
                <div class="input-group">
                  <span class="input-group-addon"><i class="glyphicon glyphicon-road"></i></span>
                  <input name="stoppageName" ng-model="stoppage.stoppageName" placeholder="Stoppage Name" class="form-control" type="text" required>
                </div>
              </div>
            </div>

            <!-- Stoppage Description-->
            <div class="form-group">
              <label class="control-label"> Description</label>
              <div class="inputGroupContainer">
                <div class="input-group">
                  <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
                  <textarea name="stoppageDescription" ng-model="stoppage.stoppageDescription" placeholder="Stoppage Description" class="form-control" type="text" required></textarea>
                </div>
              </div>
            </div>
          </fieldset>
        </form>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-warning pull-left" value="addStoppage" data-dismiss="modal" ng-click="hide=false;r.addStoppageRow(stoppage)">Submit</button>
        <button type="button" class="btn btn-info pull-right" data-dismiss="modal" ng-click="hide=false;">Cancel</button>
      </div>
    </div>
  </div>

</div>

于 2017-07-30T15:47:59.297 回答