如何在ng-click中與css類進行比較？

我試圖阻止，如果直到下課=「參觀」，允許NG單擊操作CSS類爲空或不等於NG單擊操作如何在ng-click中與css類進行比較？

這裏是我的代碼

<ul class="nav nav-wizard"> 
    <li> 
     <a href="#step1" ng-click="step=1">Step 1</a> 
    </li> 
    <li> 
     <a href="#step2" ng-click="step=2">Step 2</a> 
    </li> 
    <li> 
     <a href="#step3" ng-click="step=3">Step 3</a> 
    </li> 
    <li> 
     <a href="#step4" ng-click="step=4">Step 4</a> 
    </li> 
    <li> 
     <a href="#step5" ng-click="step=5">Step 5</a> 
    </li> 
</ul>

這些不該」通過點擊執行，直到像這樣顯示css類。

<li class="visited"> 
    <a href="#step1" ng-click="step=1">Step 1</a> 
</li>

這是能夠做點擊，如果它遇到class =「visited」條件。

來源

2015-10-16 Ivan

我認爲你應該存儲訪問鏈接時，而不是依賴於css屬性的值。 –

你可以把它像這樣使用指針事件的CSS屬性的工作（jQuery的僅僅是示範的Javascript）：

$('a[ng-click]').click(function(event) { event.preventDefault(); this.innerHTML = "YAY"; });

a[ng-click] { 
 
    pointer-events:none; 
 
} 
 

 
a[ng-click].visited { 
 
    pointer-events:all; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<a href="#test" ng-click="test">Test(DISALLOW CLICK)</a> <br /> 
 
<a href="#test2" ng-click="test2" class="visited">Test (ALLOW CLICK)</a>

來源

2015-10-16 17:13:26 MiltoxBeyond

注意，如果你看到，而不是<李班=「訪問」>反正我做的jsfiddle如何完成對不使用類=「」的裏面需要與

的http：//的jsfiddle .net/qzuqo8k9/ – Ivan

<a ng-click="doSomething($event.currentTarget.getAttribute('class'))">Hello, click me</a> 

// In controller: 
$scope.doSomething = function(classes) { 
    if(classes && classes.indexOf("visited") > -1){ 
     //do click properly 
    }else{ 
     //do nothing 
    } 
};

https://jsfiddle.net/rpuczu4a/

這是可能是你不想做的事 AngularJS哲學是關注模型操作並讓AngularJS進行渲染（基於聲明性UI的提示）。在控制器中操作DOM元素和屬性是AngularJS世界的一大禁忌。

來源

2015-10-16 17:16:01

你在說我停止使用AngularJS ... – Ivan

我說停止嘗試基於CSS值控制流程執行。應在控制器的模型中評估條件。你不需要直接訪問UI元素。 –

這並不重要，有時我們必須打破規則才能獲得例外結果。在這種情況下，這些鏈接可以自動生成class =「visited」我真的想讓它們有條件的點擊。 – Ivan

如何在ng-click中與css類進行比較？

回答

相關問題