javascript - 如何在不同的 url angularjs 上更改类名

Question

这是我的 HTML

<div class='main-class'>
<div class='step-one'>
</div>
<div class='step-two'>
</div>
<div class='step-three'>
</div>
</div>

这是我在 .run 函数中的 angularjs 脚本

var nextUrl = next.$$route.originalPath;

我想根据url给类添加active

我试过这样，

$rootScope.currentclass = "main-class";
if (nextUrl == '/step-one') {
$rootScope.currentclass = "step-one active";
//change  class name to "step-one active"
}
else if (nextUrl == '/step-two') {
$rootScope.currentclass = "step-one active";
$rootScope.currentclass = "step-two active";
//change  class name to "step-one active" and "step-two active"
}
else if (nextUrl == '/step-three') {
$rootScope.currentclass = "step-one active";
$rootScope.currentclass = "step-two active";
$rootScope.currentclass = "step-three active";
//change  class name to "step-one active" and "step-two active" and "step-three active"
}
else
{
console.log('does nothing');
}

但是类名没有改变..我该怎么做？请帮忙

我不确定我应该使用 $scope.class = "step-one active"。

Answer 1

你可以用 ng-class 做到这一点

<div class='main-class'>
<div class='step-one' ng-class='{active: currentStep >= 1}'>
</div>
<div class='step-two' ng-class='{active: currentStep >= 2}'>
</div>
<div class='step-three'  ng-class='{active: currentStep >= 3}'>
</div>
</div>

和js

$rootScope.currentclass = "main-class";
if (nextUrl == '/step-one') {
    $rootScope.currentStep = 1;
}
else if (nextUrl == '/step-two') {
    $rootScope.currentStep = 2;
}
else if (nextUrl == '/step-three') {
     $rootScope.currentStep = 3;
}
else
{
console.log('does nothing');
}