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

score 2 · Accepted Answer · answered Jul 14 '17 at 08:23

2

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.

answered Jul 14 '17 at 08:23

31piy

23,323
6
47
67

Thank you, it works. Only another question: if I wanted the conditions to be respected were two? Can I write this ng-class={ 'disabled': (trxAbil.I9WSFONI == 'N' && trxAbil.I9WSFONA == 'N')} ? – Raul Jul 14 '17 at 10:12
1

@Lorenzo -- Yes, you can write unlimited conditions, provided that the expression will return valid boolean value ultimately. – 31piy Jul 14 '17 at 10:15

Nilesh Khisadiya · Answer 2 · 2017-07-14T08:31:31.633

1

If you want to show the item but make it not clickable and look disabled using CSS or your are using bootstrap then add 'disabled' : trxAbil.I9WSFONI == 'N' condition ng-class attribute in <li> tag:

CSS:

.disabled {
    pointer-events:none; //This makes it not clickable
    opacity:0.6;         //This grays it out to look disabled
}

HTML:

<li ng-class="{'disabled' : trxAbil.I9WSFONI == 'N', '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>

edited Jul 14 '17 at 08:31

answered Jul 14 '17 at 08:13

Nilesh Khisadiya

1,560
2
15
27

Thank you too, but the css is not necessary. – Raul Jul 14 '17 at 10:13
1

Yes css not require if you are using bootstrap library. – Nilesh Khisadiya Jul 14 '17 at 12:50

How disable element list with a condition on angularJs?

2 Answers2