Css AngularJS：条件语句在控制器的AngularJS方法中不起作用_Css_Angularjs

Css AngularJS：条件语句在控制器的AngularJS方法中不起作用

css angularjs

Css AngularJS：条件语句在控制器的AngularJS方法中不起作用,css,angularjs,Css,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&g

我有以下代码：

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


.menu disabled true{
颜色：灰色；
}
.menu disabled false{
颜色：红色；
}
.菜单禁用绿色{
颜色：绿色；
}
函数deathraymenumcontroller（$scope）{
$scope.isDisabled=false；
$scope.stun=函数（）{
//击晕目标，然后禁用菜单以允许再生
如果（$scope.isDisabled=='false'）{
$scope.isDisabled='true'；
}else if（$scope.isDisabled=='true'）{
$scope.isDisabled='绿色'；
}
};
}

stun

现在，每当我点击“眩晕”按钮时，我希望它能按照控制器内的方法改变颜色

有人能帮我理解为什么它不起作用吗？

如果使用简单的HTML

类

属性，angular只对表达式求值一次（或从不求值）

你必须使用。大概是这样的：

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

Stunt

从文档中：

要评估的表达式。计算结果可以是字符串表示以空格分隔的类名、数组或类的映射将名称转换为布尔值。如果是地图，则为值为truthy的属性将作为css类添加到元素

问题是您正在比较字符串值和布尔值。
将声明更改为“false”（字符串）

如果使用简单HTML类属性，则仅对表达式求值一次（或从不求值）。-那根本不是真的。表达式将像其他表达式一样不断求值@编码忍者你绝对正确。。但仍然在纠正它，我得到一个单一的过渡，从红色到灰色。但在重新上路时，我不明白green@Padyster第一次单击：

false=>true

，第二次单击：

true=>green

，第三次单击：

既不为false也不为true，因此不满足任何条件

@Padyster如果您希望以循环顺序更改颜色，那么您没有完成if-else块，if（$scope.isDisabled==“false”）{$scope.isDisabled='true'；}如果（$scope.isDisabled='true'）{$scope.isDisabled='green'；}如果（$scope.isDisabled='green'）{$scope.isDisabled='false'；}@CodingNinja是的，你是对的，我必须完成这个循环……感谢你的详细分析和解决方案

$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';
}
};