Question

我有以下代码：

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

现在，每当我点击 Stun <li>时，我都希望它能根据控制器内的方法改变颜色。

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

Answer 1

如果使用简单的HTML class属性，angular只会对表达式求值一次（或从不）。

您必须使用ng-class。像这样：

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

来自文档：

表达式为eval。评估结果可以是字符串表示空格分隔的类名，数组或类的映射名称为布尔值。在地图的情况下，的名称值为truthy的属性将作为css类添加到元件。

Answer 2

问题是你正在比较字符串值和布尔值将声明更改为'false'（字符串）

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

AngularJS：条件语句不适用于控制器的角度JS方法

2 个答案: