Hma*_*ish 11 javascript list disabled-control angularjs
我在禁用列表中的项目时遇到问题.
<div id="searchdropdown">
<ul>
<li>list1</li>
<li ng-disabled="someCondition" ng-click="changeStatus()">list2</li>
<li>list3</li>
</ul>
</div>
它不起作用ng-disabled.
我也尝试过:
<li ng-class="disabled:someCondition" click="changeStatus()"> list2
</ li>
它也行不通.谁能提出建议？
Nic*_*cow 15
如果someCondition为true,我想你想要禁用onclick.这应该工作:
<ul>
<li>list1</li>
<li ng-click="someCondition || changeStatus()">list2</li>
<li >list3</li>
</ul>
因此,如果someCondition为true,则不会执行changeStatus(),因为当前一个语句已经为真时,OR语句不会执行下一个语句.
小智 11
我假设它是某种搜索框.
ngDisabled 实际上用于交互元素而不是列表项.
您可以使用ng-if或ng-hide从列表中完全删除这些项目:
<li ng-if="!condition" ng-click="changeStatus()">item</li>
<li ng-hide="condition" ng-click="changeStatus()">item</li>
您可以使用ngClass在禁用时应用特定类以使其显示为禁用:
<li ng-class="{'disabled':condition}" ng-click="changeStatus()">item</li>
如果您希望某个项目可见而不是可点击,则可能需要执行一项黑客操作,例如,如果该项目已被禁用或使该事件下沉,则重新打开搜索框.
或者,您可以使用以下CSS属性来禁用单击事件:
li[disabled] {
pointer-events: none;
}
也就是说,如果您要定位的浏览器支持此功能.这是一个列表:http: //caniuse.com/#feat=pointer-events
演示:
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>| 归档时间： |
|
| 查看次数： |
25374 次 |
| 最近记录： |