如何使li在angularJS中處於活動狀態？

我有一個數組與日期的下一個5日期和前5日期從當前日期，當頁面加載我需要添加一個類。活動當前日期。如何使li在angularJS中處於活動狀態？

我使用狡猾的插件[http://darsa.in/sly/]來水平滾動我的日期列表。

這個插件默認選擇第一個日期。

我怎麼能觸發，並在當前日期的頁面加載

日期示例

我有時間這樣的：

27-03-2016, 28-03-2016, 29-03-2016, 30-03-2016, 31-3-2016, 01-04-2016, 02-04-2016, 03-04-2016

HTML：

<div class="frame" id="basicSly"> 
     <ul class="clearfix slidee"> 
      <li ng-repeat="schedates in repeatdates | orderBy: 'date'" ng-model='SELDATE' ng-click="listcurrentdata(schedates.date)" sly-horizontal-repeat >{{schedates.date}}</li> 
     </ul> 
    </div>

CSS：

.slidee li.active { 
    background-color: #f2f2f2; 
    border-color: #a0a0a0; 
    }

控制器

$scope.repeatdates = array [ 
     {'date':'2016/03/27'}, 
     {'date':'2016/03/28'}, 
     {'date':'2016/03/29'}, 
     {'date':'2016/03/30'}, 
     {'date':'2016/03/31'}, 
     {'date':'2016/04/01'}, 
     {'date':'2016/04/02'} 
     ];

頁面加載如何添加活動類。

來源

2016-04-01 Khalid

的可能的複製[如何有條件地適用於AngularJS CSS樣式？（ http://stackoverflow.com/questions/13813254/how-do-i-conditional-apply-css-styles-in-angularjs） – pasine

第一件事不需要ng-model='SELDATE'超過li。

您可以使用ng-class這種情況下

<div class="frame" id="basicSly"> 
    <ul class="clearfix slidee"> 
     <li ng-repeat="schedates in repeatdates | orderBy: 'date'" 
      ng-class={ 'active' : checkDate(schedates.date) } 
      ng-click="listcurrentdata(schedates.date)" sly-horizontal-repeat > 
      {{schedates.date}} 
     </li> 
    </ul> 
</div> 


$scope.checkDate = function(date){ 
    if(date == dateToCheck) // you could check +5 & -5 day condition here 
     return true; 
    return false; 
}

來源

2016-04-01 10:33:42

它會添加頁面加載類，並選擇默認爲當前日期？對我來說，它增加了一個類，以兩個日期第一和目前 – Khalid

它肯定會添加一個類，但你需要從某處設置日期值.. –

您可以使用ng-class和寫入的角度表達

<li ng-repeat="schedates in repeatdates | orderBy: 'date'" ng-class={'active': (schedates ==today)} ng-model='SELDATE' ng-click="listcurrentdata(schedates.date)" sly-horizontal-repeat >{{schedates.date}}</li>

來源

2016-04-01 10:37:27 Ruben

如何使li在angularJS中處於活動狀態？

回答

相關問題