Как создать раскрывающееся меню с областью ввода текста в AngularJS?

Question

Я хотел бы воссоздать раскрывающееся меню такого же типа в AngularJS. Я сделал кнопку с иконками FontAwesome, вложенными туда. Есть идеи? Ссылки на ресурс?

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

Вы пытаетесь показать меню при нажатии кнопки или при наведении курсора?

В любом случае, это больше о 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; 
} 

Это должно быть все, что вам нужно, чтобы получить это выглядит как выпадающий список, вы можете добавить больше, чтобы он выглядел красиво.

Answer 2

Вы используете фронтальную рамку? Я рекомендую Bootstrap. Bootstrap's Popover функция делает то, что вы хотите - вы можете insert HTML в Popover вместо простого текста.