How disable element list with a condition on angularJs?

Question

I need to disable element list inside a nav when certain parameter is equal to 'N', and enable it when it is equal to 'S'. This is my code

<div class="slidebar-nav">
  <nav class="navbar navbar-default" role="navigation">
    <!-- Main Menu -->
    <div class="side-menu-container">
      <ul class="nav navbar-nav">
        <li ng-disabled="trxAbil.I9WSFONI == 'N'" 
            ng-class="{'current' : itemSelected === 'Gestione fondi'}"
            ui-sref="home.pag1.inquiryFondi({innescatoDaMenuLaterale: true})" 
            ng-click="onMenuSelection('Gestione fondi')">
          <a><span class="glyphicon glyphicon-edit"></span> Gestione fondi</a>
        </li>
        <li class="active" 
            ng-class="{'current' : itemSelected === 'Invio fondi'}"
            ui-sref="home.pag2" ng-click="onMenuSelection('Invio fondi')">
          <a><span class="glyphicon glyphicon-send"></span> Invio fondi</a>
        </li>
        <li class="active" 
            ng-class="{'current' : itemSelected === 'Sintesi fondi'}" 
            ui-sref="home.pag3" ng-click="onMenuSelection('Sintesi fondi')">
          <a><span class="glyphicon glyphicon-send"></span> Sintesi fondi</a>
        </li>
      </ul>
    </div>
  </nav>
</div>

I try with ng-disabled="trxAbil.I9WSFONI == 'N'" but it doesn't work. Any ideas? Thank you in advance

Answer 1

I assume that you're using Bootstrap in your UI (by watching navbar navbar-default classes).

You simply need to assign disabled class based on your conditions to disable an item in the menu. It will automatically prevent the click on that item.

<li ng-class="{'current' : itemSelected === 'Gestione fondi', 'disabled': trxAbil.I9WSFONI == 'N'}" ... > ... </li>

No need to assign ng-disabled to the li element.