Question

我想在AngularJS中重新创建相同类型的下拉菜单。我已经制作了嵌套在那里的FontAwesome图标的按钮。有任何想法吗？资源链接？

＆＃13;

var mainApp = angular.module( "mainApp", ["ngRoute"] );

mainApp.controller( "CategoriesController", [ "$scope", "dataFactory", function( $scope, dataFactory ) {

mainApp.controller("Menu", function( $scope ) {
    $scope.showMenu0 = false;
$scope.revealMenu0 = function( listing ) {
      $scope.showMenu0 = !$scope.showMenu0;
  
   }
})
}]);

＆＃13;

.burgerbtn{
	position: absolute;
    display:block;
	margin-left: 19%;
	margin-top: -17.5%;
	height: 26px;
	width: 44px;
	color: #a09c98;
	font-size: 1em;
	border-radius: 13%;
	border: 1px solid #aaa;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-mouseover="revealMenu0()" ng-mouseleave="hideMenu0()">
        <img src={imageurl;}>
      </div>
<span ng-show="showMenu0">
        <button class="burgerbtn" ><i class="fa fa-bars" aria-hidden="true"></i><i class="fa fa-caret-down" aria-hidden="true"></i></button>
      </span>

＆＃13;

Answer 1

您使用的是前端框架吗？我推荐Bootstrap。 Bootstrap的Popover功能可以满足您的需求 - 您可以insert HTML进入Popover而不仅仅是文本。

Answer 2

您是否尝试在按钮上单击或悬停时显示菜单？

无论哪种方式，这都是关于CSS而不是角度。就切换菜单而言，角度代码似乎有意义。要做一个下拉菜单，你可以这样做：

<强> 模板：

<span class="dd-btn" ng-click="revealMenu0()">
  <i>btnIcon</i>

  //notice the menu is inside the button!
  <div class="dd-menu" ng-if="showMenu0">
   //insert menu content here
  </div>
</span>

<强> CSS：

.dd-btn {
  position: relative;
}

.dd-menu {
  // this will make the menu stick to the bottom of the button 
  // you can set margin to 0 if you don't want a gap between.
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 10px;
}

这应该是让它看起来像下拉列表所需的全部内容，您可以添加更多内容以使其看起来更漂亮。

如何在AngularJS中创建带文本输入区域的下拉菜单？

2 个答案: