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

此外，更重要的是，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

Answer 1

请注意以下几点：

在 app.js 中包含 ui.bootstrap 依赖项以与 Angular ui-bootstrap.
[= 一起使用32=]
该指令由三部分组成：
1. uib-dropdown 将节点转换为下拉列表。
2. uib-dropdown-toggle 允许通过点击切换下拉菜单。该指令是可选的。
3. uib-dropdown-menu 将节点转换为弹出菜单。这些部分中的每一个都需要用作属性指令。

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

干杯！

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

AngularJS + Bootstrap: dropdown list not populating correctly

angularjs

angular-ui-bootstrap