Question

我做了一些试用添加下拉课程，但我不知道从哪里开始。这是我要添加下拉菜单的代码的小代码：

string s = string.Join(", ", EnumInfo.GetValues<MyEnumType>()
    .Where(x => (MyIntValue & (int)x) != 0));

Answer 1

如果你正在使用bootstrap那就是它......你可以用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的jqLite动态添加图像下的下拉列表。但是，如果下拉列表的结构可以预先编写，并且只有其数据是动态的，我建议你用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:{}

应用相同的逻辑

Answer 3

这是一个有效的示例： https://embed.plnkr.co/jACJyC/

注意：如果使用的是angular6，则在@NgModule'declarations：'中声明ClickOutside指令

单击图像后如何创建下拉菜单？ [自举/角]

3 个答案: