Disable list item - angularjs

Question

I'm creating a breadcrumb navigation in AngularJS. Some links should be disabled because the user didn't meet the requirements.

I've looked into the angular documentation and I figured out that you can't use ng-disabled on a list-item. So i'm using a ng-class to grey out the list-items. Here is the HTML-code that I am using at the moment:

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

Is there a way to get the ng-disabled working on the list-items because now I can still click on the list-items even when the ng-class is applied.

Thanks for helping,

Greetings, Brent

score 1 · Accepted Answer · answered Nov 30 '16 at 08:23

You can't disable the list item. Your disable the list item by color change using CSS. Same way you can handle it on the javascript. Check it disabled it or not. Then do the flow.

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

In 'navigateTo' function you need to check whether redirect or not by the second param.

Disable list item - angularjs

1 Answers1