如何在AngularJS中将下拉菜单功能迁移至caret图标？

我来帮你把下拉菜单的触发逻辑迁移到caret图标上，其实只需要把原有的AngularUI Bootstrap下拉组件的指令，从按钮转移到caret元素上就行，同时保留你原来的触发条件，具体修改如下：

修改后的完整代码 #

<td>
  <span uib-dropdown>
    {{values.numerOfValues}} 
    <!-- 把caret图标设置为下拉触发器 -->
    <i class="fas fa-caret-down" 
       uib-dropdown-toggle
       ng-disabled="values.numerOfValues <= 0"
       aria-haspopup="true"
       aria-expanded="false">
    </i>
    <!-- 下拉菜单放在同一个下拉容器内 -->
    <ul class="dropdown-menu" uib-dropdown-menu role="menu">
      <li role="menuitem" ng-click="$ctrl.myFunction(values.ids)">
        <a>Disable All</a>
      </li>
    </ul>
  </span>
</td>

关键改动说明 #

• 给包裹caret的<span>添加uib-dropdown指令，让它成为下拉组件的容器（替代原来的.yp-split-button容器）
• 给caret图标<i>加上uib-dropdown-toggle指令，让它具备触发下拉菜单的能力，完全替代原来的按钮角色
• 用ng-disabled="values.numerOfValues <= 0"保留了原来的触发条件：只有当values.numerOfValues > 0时，点击caret才会弹出下拉菜单，否则图标会处于禁用状态，点击无反应
• 下拉菜单<ul>必须放在同一个uib-dropdown容器内，这样AngularUI才能正确关联触发器和菜单

如果下拉菜单的位置不符合你的需求，还可以给<ul>添加dropdown-position属性调整位置，比如dropdown-position="bottom-left"，根据你的页面布局灵活调整就行。

内容的提问来源于stack exchange，提问作者Leo Messi