2015-07-16 4 views
0

Я использую Bootstrap 3 и AngularJS, чтобы написать код переднего конца. Я хочу, чтобы кнопка нажата, показывает два параметра: метод сортировки 1 и метод сортировки 2. Я не могу заставить свою кнопку разделения Bootstrap работать правильно. Выпадающее меню не отображается вообще.Bootstrap Button Dropdown Не работает

Код:

<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> 

Любые идеи? Спасибо.

ответ

1

Вам не хватает многих компонентов, необходимых для этой выпадающей кнопки. Пожалуйста, обратитесь к документации dropdown buttons.

Вы не имеете кнопки внутри btn-group, вы используете a тегов вместо button, и не имеете type="button" набора (из-за a тегов).

<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>

+0

Спасибо это решает его. @vanburenx – OneMoreQuestion

+0

Добро пожаловать. – vanburen

0

Он предназначен для чтения с экрана только с классом sr-only, вы видите каретку?

Смежные вопросы