AngularJS ng-disabled does not work with list of items
I am having a problem disabling an item in a list.
<div id="searchdropdown"> <ul> <li>list1</li> <li ng-disabled="someCondition" ng-click="changeStatus()">list2</li> <li>list3</li> </ul> </div> This does not work with ng-disabled .
I also tried:
<li ng-class="disabled:someCondition" click="changeStatus()"> list2 </ li> It also does not work. Can anyone suggest something?
I assume this is a search box.
ngDisabled really used for interactive items, not list items.
You can use ng-if or ng-hide to completely remove these items 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 disconnected, so that it looks disconnected:
<li ng-class="{'disabled':condition}" ng-click="changeStatus()">item</li> If you want the item to be visible but not clickable, you might need to do a hack, like reopening the search box if the item is disabled or dropped the event.
I think you want to disable 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 the OR statement will not execute the next statement if the previous one is already true.
Alternatively, you can use the following CSS property to disable click events:
li[disabled] { pointer-events: none; } That is, if the targeted browsers support this feature. Here is the 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> this code can help you.
<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>