AngularJS-如果元素具有特定類，則禁用ng-click

Question

我有一個帶附加功能的li項目清單。 我也有一個事件偵聽器，它將一個“當前”類附加到所單擊的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上的演示 。

Answer 4

可能的解決方法：如果您需要一個選擇，則可以將變量添加到范圍中，以指定要選擇的行，並使用ng-repeat生成列表，然后可以在ng-click上添加懶惰檢查（如果當前$index等於selected索引） ，您可以使用相同條件將當前類應用於ng-class 。

例如：

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>