A dependency free Angular dropdown menu that is sleek, simple and fast.
Install the following bower component
bower install ng-simple-dropdown --save
Add dropdown.js to your page, then add it to your list of Angular modules like so.
angular.module('app', [ 'ng-simple-dropdown' ])
Optional: Reference dropdown.css stylesheet or modify for your own styles. In fact, if you plan on putting your own content inside the dropdown you will definitely need to make your own.
This is just a short example how you can use dropdown with the default options and styles provided in this repository.
<div dropdown> <i class="icon ion-more dropdownToggle"></i> <div class="dropdownMenu" ng-show="showDropdown"> <a ng-click="editPost()>Edit</a> </div> </div>
dropdownis required to to specify the start of a directive.
- You'll need the
.dropdownToggleclass as a specification to what will open the the
ng-show="showDropdown"is also required if you want to actually toggle, this is done so that your controller can actually watch this variable.
On the same element where you declared the
dropdown directive, you can also
add some attributes to change the functionality of the dropdown.
||right, left, center||Aligns the dropdown depending on this value and the position of the
||Adds extra pixels to the positioning of the dropdown. This is useful if you have an arrow on top of your dropdown that needs to be positioned correctly|
||If this is set to