如何在點擊圖片後創建下拉菜單？ [引導/角]

我做了一些試驗添加下拉類，但我不知道從哪裏開始。下面是代碼的小剪斷什麼，我想添加一個下拉菜單：如何在點擊圖片後創建下拉菜單？ [引導/角]

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

來源

2016-05-12 KO12

您想創建一個下拉菜單嗎？動態地顯示一個已經存在的？你想在哪裏顯示下拉菜單？ –

動態，並在圖像下方 – KO12

我建議將您的跨度放入指令。那麼在鏈接函數中，您可以使用Angular的jqLite動態添加圖像下的下拉列表。但是，如果下拉列表的結構可以預先編寫，並且只有其數據是動態的，我建議你用ng -n來隱藏它，如果使用變量 –

如果您使用的是引導這就是它......你可以做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>

來源

2016-05-12 21:34:02

我建議把你的跨度爲指令。那麼在鏈接函數中，您可以使用Angular的jqLite動態添加圖像下的下拉列表。但是，如果下拉的結構可以預先編寫的，只有它的數據是動態的，我建議你用hidding它NG-如果和一個可變

<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

var app = angular.module('app', []); 

app.controller('TestController', ['$scope', 
    function($scope) { 
     $scope.showDropDown = false; 
     $scope.doSomething = function() { 
      $scope.showDropDown = true; 
     } 
     $scope.items = [{ 
      id: 1, 
      label: 'aLabel', 
      subItem: { name: 'aSubItem' } 
     }, { 
      id: 2, 
      label: 'bLabel', 
      subItem: { name: 'bSubItem' } 
     }]; 
    } 
]);

這是一個沒有指令的方法。如果你使用多個跨度，那麼這將不起作用。然後您需要使用指令並應用相同的邏輯scope:{}

來源

2016-05-13 00:47:18

如何在點擊圖片後創建下拉菜單？ [引導/角]

回答

相關問題