Question

我有来自服务器的歌曲对象，我通过AngularJS通过ng-repeat获得，我可以这样填写丑陋的下拉列表：

<select name="songs" ng-model="songs">
         <option ng:repeat="x in songs" value="{{x.artist}}">{{x.artist}} - {{x.title}}</option>
     </select>

但是当我的引导下拉列表看起来图形良好时，它不起作用

    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="chooseSongDropdown" data-toggle="dropdown" aria-expanded="true">
            Choose song
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="chooseSongDropdown">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
            <li ng-repeat"x in songs">{{x.title}}</li>
        </ul>


        <button class="btn btn-default dropdown-toggle" type="button" id="choosePlaylistDropdown" data-toggle="dropdown" aria-expanded="true">
            Choose playlist
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="choosePlaylistDropdown">
    </div>

Answer 1

我会使用angular directives for bootstrap。他们有多个示例供您选择。标记看起来像这样。

<div class="btn-group" dropdown is-open="status.isopen">
      <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle >
        Button dropdown <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu">
          <li ng-repeat="song in songs"><a href="#">{{song.title}}</a></li>
      </ul>
 </div>

使用angularjs填充bootstrap下拉列表？

1 个答案: