12

I am facing a problem with disabling a item in the list.

<div id="searchdropdown">
    <ul>
        <li>list1</li>
        <li ng-disabled="someCondition" ng-click="changeStatus()">list2</li>
        <li>list3</li>
    </ul>
</div>

It does not work with ng-disabled.

I also tried with:

<li ng-class="disabled:someCondition" click="changeStatus()"> list2
</ li>

It also does not work. Can anyone suggest something?

sheilak
  • 5,833
  • 7
  • 34
  • 43
Hmahwish
  • 2,222
  • 8
  • 26
  • 45

4 Answers4

16

I guess you want to disable the onclick if someCondition is true. This should work:

<ul>
  <li>list1</li>
  <li  ng-click="someCondition || changeStatus()">list2</li>
  <li  >list3</li>
</ul>

So if someCondition is true it will not execute changeStatus() since an OR statement will not execute the next statement when the previous is already true.

Nicow
  • 445
  • 4
  • 7
13

I'm assuming it is a search box of some kind.

ngDisabled is really used for interactive elements and not list items.

You can use ng-if or ng-hide to remove those items completely from the list:

<li ng-if="!condition" ng-click="changeStatus()">item</li>
<li ng-hide="condition" ng-click="changeStatus()">item</li>

You can use ngClass to apply a specific class when disabled to make it appear disabled:

<li ng-class="{'disabled':condition}" ng-click="changeStatus()">item</li>

If you want an item to be visible but not click-able, you may have to do a hack like re-opening the search box if the item is disabled or sinking the event.

JGefroh
  • 206
  • 2
  • 4
5

Alternatively, you could use the following CSS property for disabling click events: 

li[disabled] {
    pointer-events: none;
}

That is, if the browsers, that you are targeting, support this feature. Here's a list: http://caniuse.com/#feat=pointer-events

Demo: 

angular.module('MyApp', [])

  .controller('MyCtrl', function($scope) {
    $scope.toggleActiveState = function(itemIndex) {
      $scope.items[itemIndex].isActive = !$scope.items[itemIndex].isActive;
    };
  
    $scope.items = [
      {label: 'One'},
      {label: 'Two'},
      {label: 'Three', isDisabled: true},
      {label: 'Four'}
    ];
  });
ul li.item {
  display: block;
  cursor: pointer;
  background: green;
  padding: 5px 10px;
  margin-bottom: 5px;
}

ul li.item.active {
  background: red;
}

ul li.item[disabled] {
  opacity: .4;
  cursor: default;
  pointer-events: none;
}
<html ng-app="MyApp">
  <head>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    </head>
<body ng-controller="MyCtrl">
  <h1>My list:</h1>
  <ul>
    <li class="item" ng-repeat="item in items" ng-click="toggleActiveState($index)" ng-disabled="item.isDisabled" ng-class="{active: item.isActive}">{{item.label}}</li>
  </ul>
</body>
</html>
Jonas Masalskis
  • 1,206
  • 1
  • 15
  • 14
1

this code can help u.. 

<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body>

<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">Click Me!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch"/>Button
</p>
<p>
{{ mySwitch }}
</p>
</div> 

</body>
</html>