Добавить переключатель к значку в AngularJS

Question

Существует значок (в данном случае каретка), который запускает вызов функции при нажатии.Функция должна запускаться только в том случае, если 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>

. Вышеприведенная часть работает хорошо.

Проблема возникает, когда я хочу добавить меню переключения.Я не хочу, чтобы функция вызывалась при щелчке по значку, вместо этого я хочу, чтобы при щелчке по нему открывался тумблер с опцией, и только при щелчке по опции, чтобы сделать вызов.

Iудалось сделать эту функциональность следующим образом:

<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>

Переключатель открывается при нажатии кнопки внутри красного круга.Моя цель - переместить эту функциональность на кнопку внутри зеленого круга.

Есть функциональность, о которой я говорил в начале.Он вызывает функцию напрямую, не открывая переключатель.

Как перенести функциональность кнопки в каретку?

Answer 1

Я решил проблему следующим образом:

<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>

Answer 2

С чистым JavaScript Переключатель :

document.getElementsByClassName("yp-action-btn")[0].onclick = (function(){
  toggle(dropdown)
})


function toggle(id){ 
 if (id.classList[0] === "hidden"){
    id.classList = "unhidden"
  }
  else {
    id.classList = "hidden"
  }
}

.hidden {display: none}
.unhidden {display: block}

<div>
    <button type="button" class="yp-action-btn">Toggle
    </button>
    <ul class="hidden" id="dropdown">
        <li>
        <a onclick="alert()">Disable All</a>
        </li>
    </ul>
</div>