- 移动 Angular UI 教程
- 移动 Angular UI - 主页
- 移动 Angular UI - 概述
- 移动 Angular UI - 安装
- 移动 Angular UI - 项目设置
- 移动 Angular UI - 我的第一个应用程序
- 移动 Angular UI - 布局
- 移动 Angular UI - 组件
- 移动 Angular UI - 下拉菜单
- 移动 Angular UI - 手风琴
- 移动 Angular UI - 选项卡
- 移动 Angular UI - 拖放
- 移动 Angular UI - 可滚动区域
- 移动 Angular UI - 表单
- 移动 Angular UI - 滑动手势
- 移动 Angular UI - 切换开关
- 移动 Angular UI - 部分
- 移动 Angular UI - 核心细节
- 移动 Angular UI - 触摸事件
- 移动 Angular UI - PhoneGap 和 Cordova
- 移动 Angular UI - 创建 APK 文件
- 移动 Angular UI - 应用程序开发
- 移动 Angular UI - 示例
- 移动 Angular UI 资源
- 移动 Angular UI - 快速指南
- 移动 Angular UI - 有用资源
- 移动 Angular UI - 讨论
移动 Angular UI - 下拉菜单
要在移动 Angular ui 中使用下拉菜单,您需要使用.dropdown-menu类。
这是显示下拉列表的示例。
我们将在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>
我们在下拉列表中显示了教程列表。屏幕上的输出如下 -