Mobile Angular UI – Dropdowns
”;
To work with dropdowns in mobile angular ui, you need to make use of class .dropdown-menu.
Here is an example that displays dropdown.
We will add the changes in src/home/home.html.
<div class="list-group text-center"> <div class="list-group-item list-group-item-home"> <h1>{{msg}}</h1> </div> <div class="list-group-item list-group-item-home"> <div class="btn-group"> <a ui-turn-on=''testDropdown'' class=''btn''> <i class="fa fa-caret-down" aria-hidden="true"></i>Tutorials </a> <ul class="dropdown-menu" ui-outer-click="Ui.turnOff(''testDropdown'')" ui-outer-click-if="Ui.active(''testDropdown'')" role="menu" ui-show="testDropdown" ui-state="testDropdown" ui-turn-off="testDropdown"> <li><a>PHP</a></li> <li><a>JAVA</a></li> <li><a>MYSQL</a></li> <li class="divider"></li> <li><a>PYTHON</a></li> </ul> </div> </div> </div>
We are having a list of Tutorials shown in the dropdown. The output on the screen is as follows −
Advertisements
”;