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をお勧めします。ブートストラップのPopover機能は、あなたが望むものを実行します。ただテキストの代わりにinsert HTMLをPopoverに入れることができます。