javascript - Angular : Create ng-class based on variable value

标签 javascript angularjs

我正在尝试创建一个 ng 类,它使用 JavaScripts getDay() 根据一周中的当前日期将选项卡类设置为“事件”,它将数字 0-6 应用于一周中的每一天。因此,如果是星期一,则检查 currentDay 是否等于 1 apply class,如果是星期二的选项卡,则检查 currentDay,如果它等于 2,则将 class 应用到星期二,等等。例如:

Javascript(我尝试将其放入 Controller 中的 $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/

Controller :

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

关于javascript - Angular : Create ng-class based on variable value,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23284383/

相关文章:

javascript - 在节点中使用 mocha 测试 angularjs 模块

javascript - Javascript 中的数组改组

javascript - 如何从代码中更改 jquery 移动翻转开关状态

javascript - Cookie 返回的格式可能错误

angularjs - 在 ui-router 中的 $transition.onBefore 中重定向

javascript - 使用 AngularJS 组件根据类型呈现图表

javascript - 正则表达式解析整个路径?

javascript - AngularJS : having multiple functions in a controller

javascript - 无法正确使用元素指令

angularjs - $http.post : Large files do not work