AngularJS + Bootstrap: выпадающий список не заселен правильно

Question

Я мог бы с уверенностью использовать некоторые рекомендации по этому вопросу ... У меня есть простой раскрывающийся список Bootstrap, который, похоже, не заполняется должным образом, я использую ng-repeat для извлечения список из модели ИЛИ перечислить элементы вручную.

<div class="row"> 
    <div class="col-md-4 col-md-offset-4"> 
     <div class="input-group-btn"> 
      <a href="#/{{selectedAction.id}}"><button type="button" class="btn btn-info" ng-click="submit()"> {{selectedAction.name}}</button></a> 
      <button type="button" class="btn btn-default btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span></button> 
       <ul class="dropdown-menu dropdown-menu-right"> 
        <li ng-repeat="action in actions"> 
         <a href="#" ng-click="setAction(action)">{{action.name}}</a> 
        </li> 
       </ul> 
     </div><!-- /btn-group --> 
    </div><!-- /.col-lg-4 --> 
</div><!-- /.row --> 

Кроме того, что более важно, директива нг-клик должен изменить DOM с помощью нормального связывания, но это, кажется, не работает.

var DropDownApp = angular.module('DropDownApp', []); 

DropDownApp.controller('DropDownCtrl', ['$scope', function($scope) { 

    $scope.actions = [ 
     {id: 'action1', name: 'Action 1'}, 
     {id: 'action2', name: 'Action 2'}, 
     {id: 'action3', name: 'Action 3'} 
    ]; 

    $scope.selectedAction = $scope.actions[0]; 

    $scope.setAction = function(action) { 
     $scope.selectedAction = action; 
     console.log("selected==>", $scope.selectedAction); 
     $scope.submit(); 
    }; 

    $scope.submit = function() { 
     console.log($scope.selectedAction.id); 
    }; 
}]); 

Вы можете увидеть поведение кода здесь: Plunker

Answer 1

Обратите внимание, приведенные ниже:

• Включите ui.bootstrap в app.js Зависимости от работы с угловым Ui-загрузчике.

• Эта директива состоит из трех частей:

  1. uib-dropdown, который преобразует узел в раскрывающемся меню.
  2. uib-dropdown-toggle, который позволяет выпадающему меню переключаться по клику. Эта директива не является обязательной.
  3. uib-dropdown-menu, который преобразует узел во всплывающее меню. Каждая из этих частей должна использоваться как директивы атрибута.

Пожалуйста, найдите рабочую plunker здесь: http://plnkr.co/edit/v2uonllub3GsTFUxdFys?p=preview

Ура!