AngularJS ng-disabled not working with list items
Question
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?
4 answers
solution1
14 2015-09-26 19:18:38
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.
solution2
11 ACCPTED 2015-01-22 07:49:50
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.
solution3
5 2015-12-02 19:59:54
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>
solution4
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.