Javascript 向AngularJS中的图标添加切换

有一个图标（本例中为插入符号），当单击时会触发函数调用。只有当

values.numerOfValues>0

<td>   
 <span >{{values.numerOfValues}} 
        <i class="fas fa-caret-down" ng-click="values.numerOfValues > 0 && $ctrl.myFunction(values.ids)">
        </i>
    </span>
</td>

{{values.numerOfValues}

以上部分工作正常

当我想添加切换菜单时，问题出现了。我不希望在单击图标时调用该函数，而是希望在单击该图标时打开带有选项的切换，并且仅在单击该选项时进行调用

我成功地实现了如下功能：

<div class="yp-split-button" uib-dropdown>
    <button type="button" class="yp-action-btn" uib-dropdown-toggle>
    </button>
    <ul class="dropdown-menu" uib-dropdown-menu role="menu">
        <li role="menuitem" ng-click="$ctrl.myFunction(values.ids)"><a>Disable All</a></li>
    </ul>
</div>

：


document.getElementsByClassName（“yp action btn”）[0]。onclick=（函数（）{
切换（下拉）
})
函数切换（id）{
if（id.classList[0]=“隐藏”）{
id.classList=“未隐藏”
}
否则{
id.classList=“隐藏”
}
}
.hidden{display:none}
.unhidden{display:block}

切换


禁用所有


我这样做解决了问题：

<td>
    <div class="dropdown enable-status" uib-dropdown>
        <span >{{values.numerOfValues}}</span>
        <span ng-disabled="!values.numerOfValues" uib-dropdown-toggle><i class="fas fa-caret-down"></i></span>
        <ul class="dropdown-menu" uib-dropdown-menu role="menu">
            <li role="menuitem" tabindex="0"><a ng-click="$ctrl.myFunction(values.ids)">Disable all</a></li>
        </ul>
    </div>
</td>


{{values.numerOfValues}

禁用所有