i using bootstrap 3 , angularjs write front end code. want have button when clicked, shows 2 options- sort method 1, , sort method 2. cannot bootstrap split button work correctly. dropdown menu not showing @ all.
code:
<th> <a ng-click="sort = method1" class="btn btn-default btn-md"> numbers </a> <a class = "btn btn-default dropdown-toggle btn-md" data-toggle = "dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">toggle dropdown</span> </a> <ul class ="dropdown-menu"> <li><a ng-click="sort = method1" class="btn btn-default btn-md"> sorting method 1 </a></li> <li><a ng-click="sort = method2" class="btn btn-default btn-md"> sorting method 2 </a></li> </ul> </th> any ideas? thank you.
you missing many components necessary dropdown button work. please refer documentation dropdown buttons.
you don't have button inside btn-group, you're using a tags instead of button, , didn't have type="button" set (because of a tags).
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <th> <div class="btn-group"> <button type="button" class="btn btn-default btn-md" ng-click="sort = method1">numbers</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">toggle dropdown</span> </button> <ul class="dropdown-menu"> <li><a ng-click="sort = method1" class="btn btn-default btn-md"> sorting method 1 </a> </li> <li><a ng-click="sort = method2" class="btn btn-default btn-md"> sorting method 2 </a> </li> </ul> </div> </th>
Comments
Post a Comment