Отключить элемент списка - angularjs

Question

Я создаю навигационную систему в AngularJS. Некоторые ссылки должны быть отключены, потому что пользователь не соответствует требованиям.

Я посмотрел в угловую документацию и понял, что вы не можете использовать ng-disabled на элемент списка. Так что я использую ng-class серым цветом пункты списка. Вот HTML-код, который я сейчас использую:

<li id="first">
   <div ng-click="vm.navigateTo(0)">
      <label translate="{{vm.translationKeys[0]}}"></label>
   </div>
 </li>

 <li>
    <div ng-click="vm.navigateTo(1)">
       <label translate="{{vm.translationKeys[1]}}" ng-class="{'hasRequests': vm.programHasRequests == false && vm.currentStepNumber != 1}"></label>
    </div>
 </li>

 <li>
    <div ng-click="vm.navigateTo(2)">
       <label translate="{{vm.translationKeys[2]}}" ng-class="{'hasRequests': vm.hasRequestIdInUrl == false}"></label>
    </div>
 </li>

<li id="last">
   <div ng-click="vm.navigateTo(3)">
      <label translate="{{vm.translationKeys[3]}}" ng-class="{'hasRequests': vm.hasRequestIdInUrl == false}"></label>
   </div>
</li>

Есть ли способ заставить работать ng-disabled над элементами списка, потому что теперь я все еще могу нажимать на элементы списка, даже когда применяется класс ng.

Спасибо за помощь,

Привет, Брент

Answer 1

Вы не можете отключить элемент списка. Вы можете отключить элемент списка путем изменения цвета с помощью CSS. Таким же образом вы можете справиться с этим на JavaScript. Проверьте, отключено это или нет. Тогда делай поток.

<li>
    <div ng-click="vm.navigateTo(1,vm.translationKeys)">
       <label translate="{{vm.translationKeys[1]}}" ng-class="vm.programHasRequests == false ? 'Redirect':'NotRedirect'"></label>
    </div>
</li>

В функции 'navigateTo' вам нужно проверить, перенаправлять или нет по второму параметру.