AngularJS + Bootstrap：下拉列表没有正确填充

我可以肯定地使用一些指导这个...我有一个简单的Bootstrap下拉列表，似乎没有正确填充，是否使用ng-repeat来检索来自模型的列表或手动列出项目。AngularJS + Bootstrap：下拉列表没有正确填充

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

此外，更重要的是，ng-click指令应该通过正常绑定来更改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

来源

2016-07-15 Mark Davis

您没有在模块依赖列表中包含'ui.bootstrap'，也没有使用'uib-dropdown'指令。请参阅https://angular-ui.github.io/bootstrap/#/dropdown – Phil

请注意以下几点：

包含在app.js ui.bootstrap扶养与角度的用户界面，引导工作。
这个指令由三个部分组成：
1. uib-dropdown其将一个节点到一个下拉菜单。
2. uib-dropdown-toggle它允许通过点击切换下拉菜单。该指令是可选的。
3. uib-dropdown-menu它将节点转换成弹出式菜单。每个部分都需要用作属性指令。

请在这里找到工作plunker：http://plnkr.co/edit/v2uonllub3GsTFUxdFys?p=preview

干杯！

来源

2016-07-15 02:44:38 varit05

Varit05，感谢您的反馈。有效！！从来没有想过这与你的帮助！ –

AngularJS + Bootstrap：下拉列表没有正确填充

回答

相关问题