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

How to change class name on different url angularjs

本文关键字：angularjs url      更新时间：2023-09-26

这是我的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=下一个$$route.originalPath；

我想将活动添加到基于url 的类中

我试过了，

$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"。

您可以使用ng类

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

在不了解应用程序如何工作的情况下，我认为最好在控制器中执行此操作。

有一些高级的方法可以做到这一点，尽管我将把它分解为初级水平。

HTML:

<div class='main-class'>
    <div class='step-one' ng-class="{'active': stepOneActive}">One</div>
    <div class='step-two' ng-class="{'active': stepTwoActive}">Two</div>
    <div class='step-three' ng-class="{'active': stepThreeActive}">Three</div>
</div>

Javascript/Angular：

$scope.stepOneActive = false;
$scope.stepTwoActive = false;
$scope.stepThreeActive = false;
if (nextUrl == '/step-one') {
    $scope.stepOneActive = true;
} else if (nextUrl == '/step-two') {
    $scope.stepOneActive = true;
    $scope.stepTwoActive = true;
} else if (nextUrl == '/step-three') {
    $scope.stepOneActive = true;
    $scope.stepTwoActive = true;
    $scope.stepThreeActive = true;
}

基本上，上面是根据访问哪个URL来设置布尔范围变量（我假设您已经完成了URL捕获逻辑）。然后，我在模板中使用ng-class来检查是否应该给出特定的步骤，然后类active。

工作示例

相关文章：