イメージをクリックした後にドロップダウンメニューを作成するにはどうすればよいですか？ [bootstrap/angular]

Question

私はドロップダウンクラスを追加して試しましたが、どこから始めるべきかわかりません。ここで私はドロップダウンメニューを追加したい何のためのコードの小さなsnipperです：

<span 
    id="dropdown-info" 
    ng-init= "myVar='images/info_icon_off.png'" 
    ng-mouseover="myVar='images/info_icon_on.png'" 
    ng-mouseout="myVar='images/info_icon_off.png'" 
    ng-click="doSomething()"> 
    <img class="info-icon" ng-src="{{myVar}}" alt="Information" width="10" height="10"> 
</span> 

Answer 1

あなたはそれはそれだ...あなたは動的にリストをロードするためにLiとngのリピートを行うことができますことを、ブートストラップを使用している場合。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="dropdown"> 
 
<img src="https://c1.iggcdn.com/indiegogo-media-prod-cld/image/upload/c_limit,w_620/v1456219661/avvcx99jxynsu2svk9po.png" class=" dropdown-toggle" data-toggle="dropdown" /> 
 
    <ul class="dropdown-menu"> 
 
    <li><a href="#">HTML</a></li> 
 
    <li><a href="#">CSS</a></li> 
 
    <li><a href="#">JavaScript</a></li> 
 
    </ul> 
 
</div>

Answer 2

私はディレクティブにあなたのスパンを置くことをお勧めします。リンク関数では、AngularのjqLit​​eを使って画像の下にドロップダウンを動的に追加することができます。ドロップダウンの構造は事前に書き込むことができ、唯一そのデータが動的である場合しかし、私はあなたがそれをhiddingことをお勧めしたいNG-ifとその後の変数

<span 
    id="dropdown-info" 
    ng-init= "myVar='images/info_icon_off.png'" 
    ng-mouseover="myVar='images/info_icon_on.png'" 
    ng-mouseout="myVar='images/info_icon_off.png'" 
    ng-click="doSomething()"> 
    <img class="info-icon" ng-src="{{myVar}}" alt="Information" width="10" height="10"> 
    <select ng-if="showDropDown" ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select> 
</span> 

であなたのJS

をそのオプションを移入

これはディレクティブのない方法です。多くのスパンを使用すると、これは機能しません。その後、ディレクティブを使用して同じロジックを適用する必要がありますscope:{}