Trying to create a dynamic dropdown menu for a button. Preloading the menu from server as json and that part works fine but for some reason bootstrap doesn't display the menu items except for the last in the array.
<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>
The variable 'tags' contains the preloaded array.
Tried on chrome and IE with the same result.
If I remove the class 'dropdown-menu' from the ul element the complete bullet list will be displayed like:
<Button>
foo *
* bar
* baz
For info:
The app.js part populating the tags variable:
this.loadTags = function () {
$http.get('http://localhost:5566/api/tags').
success(function (data, status, headers, config) {
$scope.tags = data.tags;
}).
error();
}
(This works fine however)
Found the problem after some experimenting. Moved the ng-repeat to the li element as
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.