Wie würde ich in AngularJS ein Dropdown-Menü mit Texteingabebereich erstellen?

Question

Ich möchte diese Art von Dropdown-Menü in AngularJS neu erstellen. Ich habe den Button mit FontAwesome Icons darin verschachtelt. Irgendwelche Ideen? Links zur Ressource?

DropDown Text Input Example

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; 
 
    
 
    } 
 
}) 
 
}]);

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

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

Answer 1

Versuchen Sie, das Menü beim Klicken auf die Schaltfläche oder beim Hover anzuzeigen?

In jedem Fall ist dies mehr über CSS als eckig. Ihr Winkelcode scheint für das Umschalten des Menüs sinnvoll zu sein. Um einen Tropfen zu machen hinunter Sie etwas tun können:

Vorlage:

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

Das sollte alles, was Sie sein müssen erhalten Wenn es wie ein Dropdown-Menü aussieht, können Sie weitere hinzufügen, um es hübsch aussehen zu lassen.

Answer 2

Verwenden Sie einen Rahmen-Front-End? Ich empfehle . Bootstrap Popover Funktion macht, was Sie wollen - Sie können insert HTML in den Popover statt nur Text.