动态下拉菜单Angular和Bootstrap

Dynamic dropdown menu Angular and Bootstrap

本文关键字：Bootstrap Angular 下拉菜单 动态      更新时间：2023-09-26

尝试为按钮创建一个动态下拉菜单。从服务器以json形式预加载菜单，这部分工作得很好，但由于某种原因，bootstrap不显示菜单项，除了数组中的最后一个。

<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 
        <span class="glyphicon glyphicon-camera"></span> Select images to view <b class="caret"></b>
    </button>
    <ul ng-repeat="tag in tags" class="dropdown-menu">
        <li><a href="#" ng-click="view.setTag(tag)">{{tag}}</a></li>
    </ul>
</div>

变量'tags'包含预加载的数组。

在chrome和IE上尝试了相同的结果。

如果我从ul元素中删除'dropdown-menu'类，完整的项目符号列表将显示如下:

<Button>
foo *
* bar
* baz
为信息:

填充标签变量的app.js部分:

    this.loadTags = function () {
        $http.get('http://localhost:5566/api/tags').
        success(function (data, status, headers, config) {
            $scope.tags = data.tags;
        }).
        error();
    }

经过试验发现问题。将ng-repeat移动到li元素

    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 
            <span class="glyphicon glyphicon-camera"></span> Select images to view <b class="caret"></b>
        </button>
        <ulclass="dropdown-menu">
            <li  ng-repeat="tag in tags"><a href="#" ng-click="view.setTag(tag)">{{tag}}</a></li>
                 ^^^^^^^^^^^^^^^^^^^^^^^
        </ul>
    </div>
相关文章：