css - How to do split select like ui bootstrap slipt dropdown -
i want split normal selectbox should default ui bootstrap dropdown. have used uibootstrap dropdown, problem selected dropdown value not displayed on top normal dropdown do.
please let me know how split select.?
you can use current selected item button label ui bootstrap split button this:
<!-- 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>
and in controller:
$scope.items = ['action 1','action 2','action 3']; $scope.selectitem = function(item) { $scope.selecteditem = item; }
see plnkr: http://plnkr.co/edit/rzomoa2t3jzdniz3eqow?p=preview
Comments
Post a Comment