Question

我有一个附有功能的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事件？

Answer 1

您无法禁用列表，因为它不是交互式元素，可以使用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>

Answer 2

如果您使用button标记作为触发器而不是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>

如果需要，您可以自定义按钮样式，并且可以像标准文本元素一样显示它。

.cf button {
  border: none;
  background: none;
}

Answer 3

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


// controller
function MyController($scope) {
    $scope.clickLi = {
        5: true
    };

    $scope.getRadius = function(li_id) {
        $scope.clickLi[li_id] = true;
        console.log(li_id);
    };
}

JSFiddle上的demo。

Answer 4

可能的解决方法：如果您需要单个选择，您可以将变量添加到范围中，指定选择哪一行并使用ng-repeat生成列表，然后如果当前ng-click是$index，您可以在selected添加延迟检查等于ng-class索引，您可以使用相同的条件将当前类应用于$scope.selected = 0; $scope.distances = [5, 10, 25, 50, 100];。

例如：

<强> app.js

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

<强> app.html

15 23 63 52 58
11 254 55 36 22 547 55 2 
22 58 66 3 11 4 7 5 2 8 
48 49 23 88 62 33

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

4 个答案: