AngularJS ng-disabled 不适用于列表项答案

【问题标题】：AngularJS ng-disabled not working with list itemsAngularJS ng-disabled 不适用于列表项
【发布时间】：2015-03-20 22:15:48
【问题描述】：

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

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

它也不起作用。任何人都可以提出一些建议吗？

【问题讨论】：

禁用列表项是什么意思？您要删除列表项还是其他？
为什么要禁用列表项？
如果它是一个选择列表，我会理解。我会这样做

标签： javascript angularjs list disabled-control

【解决方案1】：

我假设它是某种搜索框。

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>

如果您希望某个项目可见但不可点击，则可能需要在该项目被禁用或接收事件时重新打开搜索框。

【讨论】：

【解决方案2】：

这段代码可以帮助你..

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

【讨论】：

【解决方案3】：

如果 someCondition 为真，我猜你想禁用 onclick。这应该有效：

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

因此，如果 someCondition 为真，它将不会执行 changeStatus()，因为当前一个已经为真时，OR 语句将不会执行下一个语句。

【讨论】：

【解决方案4】：

或者，您可以使用以下 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>

【讨论】：