angularjs - Bootstrap Button Dropdown Not Working -


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