Question

我有以下Bootstrap UI模式模板，它在滚动DIV中显示客户列表。

<div>
    <div class="modal-header">
        <h3 class="modal-title">Select a customer</h3>
    </div>
    <div class="modal-body">
        <div class="modal-container">
            <label data-ng-repeat="cust in customers">
                <input name="customer" type="radio" data-ng-value="{{cust}}" value="{{cust}}" data-ng-checked="{{cust}}.name==$parent.selected.item.name" ng-model="$parent.selected.item" />{{cust.name}}<span class="text-muted">&nbsp;-&nbsp;{{cust.address}}</span>
            </label>
        </div>
        <div class="modal-footer">
            <button class="btn btn-success pull-left" data-ng-click="new()">New</button>
            <button class="btn btn-primary" data-ng-click="ok()">OK</button>
            <button class="btn btn-default" data-ng-click="cancel()">Cancel</button>
        </div>
        <div id="newCustomer" class="collapse">
            <div class="form-group">
                <label for="customerName" class="col-sm-5 control-label">Customer Name</label>
                <div class="col-sm-5">
                    <input id="customerName" class="form-control" type="text" data-ng-model="newCustomer.name" placeholder="New customer name" />
                </div>
            </div>
            <div class="form-group">
                <label for="customerAddress" class="col-sm-5 control-label">Address</label>
                <div class="col-sm-5">
                    <input id="customerAddress" class="form-control" type="text" data-ng-model="newCustomer.address" placeholder="New customer address" />
                </div>
            </div>
        </div>
    </div>
</div>

底部有三个按钮New，OK和Cancel。我想要发生的是当点击New按钮时，newCustomer div块应该在展开和折叠状态之间切换，重要的是调整模态的大小，以便在展开模式时调整大小以适应div块占用的空间，并在div块折叠时缩小模态。

可以使用纯Bootstrap和AngularJS解决方案来完成吗？

我使用的是Bootstrap v3.3.1和AngularJS v1.3.9。

Answer 1

我要做的是在你的模态中实际使用bootstrap collapse。这样你就可以用boostrap完成所有工作。

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <label data-ng-repeat="cust in customers">
            <input name="customer" type="radio" data-ng-value="{{cust}}" value="{{cust}}" data-ng-checked="{{cust}}.name==$parent.selected.item.name" ng-model="$parent.selected.item" />{{cust.name}}<span class="text-muted">&nbsp;-&nbsp;{{cust.address}}</span>
        </label>
<div class="collapse" id="collapseExample">
  <div class="well">
     <div class="form-group">
       <label for="customerName" class="col-sm-5 control-label">Customer Name</label>
       <div class="col-sm-5">
         <input id="customerName" class="form-control" type="text" data-ng-model="newCustomer.name" placeholder="New customer name" />
       </div>
     </div>
     <div class="form-group">
        <label for="customerAddress" class="col-sm-5 control-label">Address</label>
        <div class="col-sm-5">
           <input id="customerAddress" class="form-control" type="text" data-ng-model="newCustomer.address" placeholder="New customer address" />
        </div>
      </div>
  </div>
</div>
      <div class="modal-footer">
<button class="btn btn-success" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  NEW BUTTON
</button>
        <button class="btn btn-primary" data-ng-click="ok()">OK</button>
        <button class="btn btn-default" data-ng-click="cancel()">Cancel</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

http://jsfiddle.net/tea6gj4e/1/

在DIV展开/折叠时动态调整Bootstrap UI模式的大小

1 个答案: