Mobile Angular UI – Dropdowns


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 −


Dropdown

Advertisements

”;

Leave a Reply

Your email address will not be published. Required fields are marked *