Powering HTML with AngularJS.
Simple Twitter Bootstrap dropdown demo powered by AngularJS.
This method is based on AngularJS attributes. the "dropdown" master DOM is listening "open" variable. if it's true ng-class add the open css class else it's remove. the ng-click event set "open" variable.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset=UTF-8"> | |
| <title>AngularJS - Quick Bootstrap dropdown</title> | |
| <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script> | |
| <link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"> | |
| </head> | |
| <body> | |
| <div class="container ng-scope" ng-app=""> | |
| <div class="dropdown clearfix" ng-class="{open: open}"> | |
| <a class="btn dropdown-toggle" href="#" ng-click="open=!open">Action<span class="caret"></span></a> | |
| <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> | |
| <li><a tabindex="-1" href="#">Action </a></li> | |
| <li><a tabindex="-1" href="#">Another action</a></li> | |
| <li><a tabindex="-1" href="#">Something else here</a></li> | |
| <li class="divider"></li> | |
| <li><a tabindex="-1" href="#">Separated link</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Remove href attribute from a.dropdown-toggle to prevent it from navigating to main page. As seen at: http://stackoverflow.com/a/11672909/257443