動態下拉菜單Angular和Bootstrap

Question

嘗試為按鈕創建動態下拉菜單。 從服務器將菜單預加載為json，並且該部分工作正常，但是由於某些原因，引導程序不會顯示菜單項，除了數組中的最后一個菜單項。

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

變量“標簽”包含預加載的數組。

在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();
    }

（但是效果很好）

Answer 1

經過試驗后發現了問題。 將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>