AngularJS：條件語句在控制器

角JS方法不工作我有以下代碼：AngularJS：條件語句在控制器

<!DOCTYPE html> 
<html data-ng-app> 
<head> 
<title></title> 
<style> 
.menu-disabled-true { 
color: gray; 
} 
.menu-disabled-false { 
color: red; 
} 

.menu-disabled-green { 
color: green; 
} 
</style> 
</head> 
<body > 
<script src="angular.min.js"></script> 
<script> 
function DeathrayMenuController($scope) { 
$scope.isDisabled = false; 
$scope.stun = function() { 
// stun the target, then disable menu to allow regeneration 
if($scope.isDisabled == 'false'){ 
    $scope.isDisabled = 'true'; 
}else if($scope.isDisabled == 'true'){ 
     $scope.isDisabled = 'green'; 
} 
}; 
} 
</script> 
<div ng-controller='DeathrayMenuController'> 
<ul> 
<li class='menu-disabled-{{isDisabled}}' ng-click='stun()'>Stun</li> 
</ul> 
</div></body> 
</html>

現在，每當我在眩暈單擊<li>然後我希望它改變顏色按照方法內控制器。

有人能幫我理解爲什麼它不起作用嗎？

來源

2013-11-28 Padyster

問題是你正在比較字符串值和布爾值。
更改聲明「假」（串）

$scope.isDisabled = 'false'; 
$scope.stun = function() { 
// stun the target, then disable menu to allow regeneration 
if($scope.isDisabled == 'false'){ 
    $scope.isDisabled = 'true'; 
}else if($scope.isDisabled == 'true'){ 
     $scope.isDisabled = 'green'; 
} 
};

來源

2013-11-28 10:51:28 CodingNinja

我準備了一個小提琴http://jsfiddle.net/alexeime/mddDV/ – Alexei

@CodingNinja你是絕對正確的..但仍然在糾正它，我得到一個單一的過渡紅色變成灰色。但在重新點擊我沒有得到綠色 – Padyster

@Padyster第一次點擊：'false => true'，第二次點擊：'true => green'，第三次點擊：'既不虛假也不真實，所以沒有條件符合 – Yoshi

如果使用簡單的HTML class屬性，angular只會評估表達式（或從不）。您必須使用ng-class。事情是這樣的：

<li ng-class="{'menu-disabled-green': isDisabled == true, 
'menu-disabled-true': isDisabled == false}" >Stun</li>

從文檔：

表達對EVAL。評估結果可以是字符串，表示空間分隔的類名稱，數組或類名稱爲布爾值的映射。在地圖的情況下，其值爲truthy的屬性的名稱將作爲css類添加到元素。

來源

2013-11-28 10:05:07 TheHippo

*如果您使用簡單的HTML類屬性的角度評估一次（或從不）的表達。* - 這是不正確的。表達式會像其他表達式一樣不斷進行評估。 http://jsbin.com/aTIjeHU/2/ – Yoshi

AngularJS：條件語句在控制器

回答

相關問題