2016-04-01 15 views
1

Ich habe ein Array mit Datum der nächsten 5 Daten und der letzten 5 Daten vom aktuellen Datum, wenn die Seiten geladen werden muss ich eine Klasse hinzufügen. Active das aktuelle Datum.Wie mache ich li in angularJS aktiv?

Ich benutze sly plugin [http://darsa.in/sly/], um meine Datumsliste horizontal zu scrollen.

Dieses Plugin Standard wählen Sie das erste Datum.

Wie kann ich auslösen und mache in dem aktuellen Datum auf Seite geladen

Datum Beispiel

I Datum wie diese:

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; 
    } 

CONTROLLER

$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'} 
     ]; 

auf Seite laden wie kann ich aktive Klasse hinzufügen.

+0

Mögliche Duplikat [Wie kann ich bedingt CSS-Stile in AngularJS anwenden?] (http://stackoverflow.com/questions/13813254/how-do-i-conditional-apply-css-styles-in-angularjs) – pasine

Antwort

1

Erste Sache keine ng-model='SELDATE' über li zu haben.

könnten Sie ng-class für einen solchen Fall verwenden

<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; 
} 
+0

wird es die Klasse beim Laden der Seite hinzufügen und Standard als aktuelles Datum auswählen? für mich hat es eine Klasse zu beiden Daten zuerst und dem aktuellen – Khalid

+0

hinzugefügt es wird sicherlich eine Klasse hinzufügen, aber Sie müssen Datumswert von irgendwo einstellen .. –

1

Sie ng-class verwenden können, und schreiben Winkel Ausdruck

<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>

Verwandte Themen