How do i make li active in angularJS?

Question

I have an array with date of next 5 dates and previous 5 dates from current date, when pages loads i need to add a class .active the current date.

I am using sly plugin [ http://darsa.in/sly/ ] to scroll my date list horizontal.

This plugin default select first date.

How can I trigger and make in to current date on page loads

DATE EXAMPLE

I have date like this:

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

on page load how can I add active class.

Possible duplicate of [How do I conditionally apply CSS styles in AngularJS?](http://stackoverflow.com/questions/13813254/how-do-i-conditionally-apply-css-styles-in-angularjs) — pasine, Apr 01 '16 at 10:34

score 1 · Accepted Answer · answered Apr 01 '16 at 10:33

First thing no need to have ng-model='SELDATE' over li.

You could use ng-class for such case

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

will it add the class on page loads and select default as current date? for me its added a class to both dates first and to the current — Khalid, Apr 01 '16 at 10:38

score 1 · Answer 2 · answered Apr 01 '16 at 10:37

You can use ng-class and write angular expression

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

How do i make li active in angularJS?

2 Answers2