Angular:基于变量值创建ng类

Angular: Create ng-class based on variable value

本文关键字：创建 ng 变量值 Angular      更新时间：2023-09-26

我正试图创建一个ng类，该类使用JavaScripts getDay（）将数字0-6应用于一周中的每一天，根据一周的当前日期将选项卡类设置为"活动"。因此，如果是星期一，请检查currentDay是否等于1应用类，如果是周二的选项卡，请检查currentDay，如果等于2应用类到周二，等等。例如：

Javascript（我试图将其放入控制器中的$scope对象中，但似乎也不起作用）：

var d = new Date();
var currentDay = d.getDay();

查看

<ul class="nav nav-tabs">
 <li ng-class="{'active' : currentDay == 4}">
   <a href="schedule/#thursday" data-toggle="tab">
     <h2>Day 1 | Thursday</h2>
   </a>
 </li>
 <li>
   ...
 </li>
</ul>

我尝试了多种不同的方法来实现这一点。如果我在控制台中检查currentDay==4（因为今天是星期四），它会返回为"true"。所以应该应用该类。我还尝试了在没有"周围活动的情况下，将条件设置为[]。似乎什么都不管用。。感谢您的意见，谢谢！

您上面的代码对我很有效。下面是一个fiddle示例：http://jsfiddle.net/HB7LU/3252/

控制器：

var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
    $scope.currentDay = 4;
}

视图：

<div ng-controller="MyCtrl">
    <ul class="nav nav-tabs">
        <li ng-class="{'active' : currentDay == 4}">
            <a href="schedule/#thursday" data-toggle="tab">
                <h2>Day 1 | Thursday</h2>
            </a>
        </li>
    </ul>
</div>

如果我不得不猜测的话，您没有正确地将值应用于$scope

我已经想明白了！

所以在控制器中，我在下面添加了最后一行

var d = new Date();
var currentDay = d.getDay();
$scope.activeDay = currentDay;

并将视图更新为：

<li ng-class="{'active' : activeDay == 4}">
相关文章：