Angular：基於變量值創建ng-class

我正在嘗試創建一個ng-class，它基於當前使用JavaScripts的getDay（）函數將當前日期設置爲「active」到每週的每一天。所以，如果今天是星期一，檢查CURRENTDAY如果它等於1應用類，如果是週二的選項卡中勾選CURRENTDAY，如果是等於2應用類週二，等等。例如：Angular：基於變量值創建ng-class

的Javascript（我試圖把它變成$範圍對象在我的控制器，但似乎並沒有要麼工作）：

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'。所以班級應該適用。我也試過沒有''左右活躍，並把條件放在[]中。沒有什麼似乎工作..欣賞任何輸入，謝謝！

來源

2014-04-25 satully89

顯示你是怎麼添加的控制器。 – Chandermani

我能夠解決它！

所以在控制器我下面加

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

的最後一行，並更新視圖閱讀：

<li ng-class="{'active' : activeDay == 4}">

來源

2014-04-25 22:41:48 satully89

上面的代碼適用於我。下面是一個例子小提琴：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正確

來源

2014-04-25 04:57:33

感謝@Matt Way的回覆！事情是我不想在currentDay的控制器中設置一個硬性值。我希望它能檢查實際的一天。 JavaScript的getDay（）返回數字0-6，0表示星期日--6表示星期六。我能夠通過檢查當天動態地使其工作，並將用答案更新！ – satully89

@ satully89：我認爲將其顯示爲硬編碼值會使其更容易理解，並將其改爲微不足道。很高興你找到你的答案。 –

Angular：基於變量值創建ng-class

回答

相關問題