Javascript AngularJS ng已禁用，无法处理列表项_Javascript_Angularjs_List_Disabled Control

Javascript AngularJS ng已禁用，无法处理列表项

javascript angularjs list

Javascript AngularJS ng已禁用，无法处理列表项,javascript,angularjs,list,disabled-control,Javascript,Angularjs,List,Disabled Control,我在禁用列表中的项目时遇到问题 <div id="searchdropdown"> <ul> <li>list1</li> <li ng-disabled="someCondition" ng-click="changeStatus()">list2</li> <li>list3</li> </ul> </div>

我在禁用列表中的项目时遇到问题

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

它也不起作用。有人能给我一些建议吗？

我想这是某种搜索框

ngDisabled

实际上用于交互元素，而不是列表项

您可以使用

ng if

或

ng hide

从列表中完全删除这些项目：

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

如果您希望某个项目可见但无法单击，则可能需要执行类似于在项目被禁用时重新打开搜索框或取消事件的操作。

此代码可以帮助您。。



点击我！


按钮


{{mySwitch}}

如果某个条件为真，我想您应该禁用onclick。这应该起作用：

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


清单1
列表2
列表3

因此，如果someCondition为true，它将不会执行changeStatus（），因为OR语句不会在上一条语句为true时执行下一条语句。

或者，您可以使用以下CSS属性禁用单击事件：

也就是说，如果您的目标浏览器支持此功能。以下是一份清单：

演示：

angular.module（'MyApp'，[]）
.controller（'MyCtrl'，函数（$scope）{
$scope.toggleActiveState=函数（itemIndex）{
$scope.items[itemIndex].isActive=！$scope.items[itemIndex].isActive；
};
$scope.items=[
{标签：'一'}，
{label:'Two'}，
{标签：'Three'，isDisabled:true}，
{标签：'Four'}
];
});
ulli.item{
显示：块；
光标：指针；
背景：绿色；
填充物：5px10px；
边缘底部：5px；
}
ul li.item.active{
背景：红色；
}
ul li.项目[禁用]{
不透明度：.4；
游标：默认值；
指针事件：无；
}

我的名单：

{{item.label}

禁用列表项是什么意思？是否要删除列表项或其他？为什么要禁用列表项？如果是selectlist，我会理解。我会执行此操作列表1列表2列表3
<li ng-class="{'disabled':condition}" ng-click="changeStatus()">item</li>

<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>

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

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