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

向类添加活动

我试过这样，

$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

如果不了解您的应用如何运作，我会假设您最好在控制器内执行此操作。

有一些先进的方法可以做到这一点，虽然我会把它分解为初学者水平。

<强> 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 /角：

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

<强> WORKING EXAMPLE

Answer 2

你可以用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');
}

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

2 个答案: