Javascript AngularJS-如果元素具有特定类，则禁用ng单击

我有一个li项目列表，其中包含附加的功能。我还有一个事件监听器，它将“current”类附加到正在单击的任何li项

HTML

<ul class="cf" id="filter">
 <li ng-click="getRadius(5)" class="current"><a href="#">5 km</a></li>
 <li ng-click="getRadius(10)"><a href="#">10 km</a></li>
 <li ng-click="getRadius(25)"><a href="#">25 km</a></li>
 <li ng-click="getRadius(50)"><a href="#">50 km</a></li>
 <li ng-click="getRadius(100)"><a href="#">100 km</a></li>
</ul>

---

如果特定li项具有“当前”类，是否有方法禁用ng click事件？或者有更好的方法来执行此操作？

如果使用

按钮
标记作为触发器而不是
li
，则可以使用
ng disabled
指令来允许按条件单击。例如：

<ul class="cf" id="filter">
 <li><button ng-click="getRadius(5)" ng-disabled="current!=5">5 km</button></li>
 <li><button ng-click="getRadius(10)" ng-disabled="current!=10">10 km</button></li>
 <li><button ng-click="getRadius(25)" ng-disabled="current!=25">25 km</button></li>
 <li><button ng-click="getRadius(50)" ng-disabled="current!=50">50 km</button></li>
 <li><button ng-click="getRadius(100)" ng-disabled="current!=100">100 km</button></li>
</ul>

您不能禁用列表，因为它不是交互式元素。禁用时，可以使用ngClass应用特定类，使其显示为禁用：

<li ng-class="{'disabled':condition}"ng-click="getRadius(5)">item</li>



您可以使用ng if从列表中完全删除这些项目：

 <li ng-if="!condition" ng-click="getRadius(5)">item</li>
 <li ng-if="condition" >item</li>


项目
//模板







//控制器
函数MyController（$scope）{
$scope.clickLi={
5:对
};
$scope.getRadius=函数（li\u id）{
$scope.clickLi[li\u id]=true；
控制台日志（li_id）；
};
}

JSFIDLE上的A。
可能的解决方法：
如果您需要单个选择，您可以将变量添加到指定选择哪一行的范围中，并使用
ng repeat
生成列表，然后如果当前
$index
等于
selected
index，您可以在
ng click
上添加延迟检查，您可以使用相同的条件将当前类应用于
ng class

例如：

<ul class="cf" id="filter">
 <li><button ng-click="getRadius(5)" ng-disabled="current!=5">5 km</button></li>
 <li><button ng-click="getRadius(10)" ng-disabled="current!=10">10 km</button></li>
 <li><button ng-click="getRadius(25)" ng-disabled="current!=25">25 km</button></li>
 <li><button ng-click="getRadius(50)" ng-disabled="current!=50">50 km</button></li>
 <li><button ng-click="getRadius(100)" ng-disabled="current!=100">100 km</button></li>
</ul>

app.js

$scope.selected = 0;
$scope.distances = [5, 10, 25, 50, 100];  

app.html

<ul class="cf" id="filter">
  <li ng-repeat = "distance in distances" ng-click="($index == selected) || getRadius(distance)" ng-class="{'current':($index == selected)}"><a href="#">{{distance}} km</a></li>
</ul>




当您分配
.current
类时，也会在模型上设置属性并绑定该属性…？我想要getRadius功能？？？@Petrichor您能给我举个例子吗？我对Angular还是个新手。使用css属性
指针事件：none
<ul class="cf" id="filter">
  <li ng-repeat = "distance in distances" ng-click="($index == selected) || getRadius(distance)" ng-class="{'current':($index == selected)}"><a href="#">{{distance}} km</a></li>
</ul>