Javascript AngularJS ng-disabled 不适用于列表项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28083400/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS ng-disabled not working with list items
提问by Hmahwish
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.
它不适用于ng-disabled.
I also tried with:
我也试过：
<li ng-class="disabled:someCondition" click="changeStatus()"> list2
</ li>
It also does not work. Can anyone suggest something?
它也不起作用。任何人都可以提出建议吗？
采纳答案by JGefroh
I'm assuming it is a search box of some kind.
我假设它是某种搜索框。
ngDisabledis really used for interactive elements and not list items.
ngDisabled真正用于交互元素而不是列表项。
You can use ng-ifor ng-hideto remove those items completely from the list:
您可以使用ng-if或ng-hide从列表中完全删除这些项目：
<li ng-if="!condition" ng-click="changeStatus()">item</li>
<li ng-hide="condition" ng-click="changeStatus()">item</li>
You can use ngClassto apply a specific class when disabled to make it appear disabled:
您可以ngClass在禁用时应用特定类以使其显示为禁用：
<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.
如果您希望某个项目可见但不可点击，则您可能需要进行黑客攻击，例如在该项目被禁用或下沉事件时重新打开搜索框。
回答by Nicow
I guess you want to disable the onclick if someCondition is true. This should work:
如果 someCondition 为真，我猜您想禁用 onclick。这应该有效：
<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.
因此，如果 someCondition 为真，它将不会执行 changeStatus()，因为当前一个语句已经为真时，OR 语句将不会执行下一个语句。
回答by Jonas Masalskis
Alternatively, you could use the following CSS property for disabling click events:
或者，您可以使用以下 CSS 属性来禁用单击事件：
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
也就是说，如果您的目标浏览器支持此功能。这是一个列表：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>回答by Jonas Masalskis
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>
