單擊圖像后如何創建下拉菜單？ [引導程序/角度]

Question

我做了一些嘗試，添加了一個下拉菜單，但是我不知道從哪里開始。 這是我要添加下拉菜單的小片段代碼：

<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-repeat來動態加載列表。

 <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在圖像下方動態添加下拉列表。 但是，如果下拉列表的結構可以預先編寫，並且只有其數據是動態的，建議您使用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

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:{}應用相同的邏輯scope:{}

Answer 3

這是一個工作示例： https : //embed.plnkr.co/jACJyC/

注意：如果您使用的是angular6，則在@NgModule'declarations：'中聲明ClickOutside指令。