Блог

Пытаюсь создать динамическое выпадающее меню для кнопки. Предварительная загрузка меню с сервера в формате 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 с тем же результатом.

Если я удалю класс ‘dropdown-menu’ из элемента ul, полный маркированный список будет отображаться следующим образом:

 <Button>
foo *
* bar
* baz
  

Для получения дополнительной информации:

The app.js часть, заполняющая переменную tags:

     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>