css - 如何像ui bootstrap slipt dropdown一样进行拆分选择

Question

我想拆分普通的选择框，它应该看起来像默认的 ui bootstrap 下拉菜单。我使用了 uibootstrap 下拉菜单，但问题是选择的下拉菜单值不会像普通下拉菜单那样显示在顶部。

请告诉我如何拆分选择。？

Answer 1

您可以像这样使用当前选择的元素作为按钮标签与 ui bootstrap 拆分按钮:

<!-- Split button -->
<div class="btn-group dropdown" uib-dropdown="" style="">
  <button id="split-button" type="button" class="btn btn-danger">{{selectedItem || 'Choose Item'}}</button>
  <button type="button" class="btn btn-danger dropdown-toggle" uib-dropdown-toggle="" aria-haspopup="true" aria-expanded="true">
    <span class="caret"></span>
  </button>
  <ul uib-dropdown-menu="" role="menu" aria-labelledby="split-button" class="dropdown-menu">
    <li role="menuitem" ng-repeat="item in items" ng-click="selectItem(item)"><a href>{{item}}</a></li>
  </ul>
</div>

在你的 Controller 中:

$scope.items = ['action 1','action 2','action 3'];

$scope.selectItem = function(item) {
  $scope.selectedItem = item;
}

请参阅此 plnkr:http://plnkr.co/edit/RZoMoa2t3JZDNiZ3eQoW?p=preview