如何让我在angularJS中活跃?

时间:2016-04-01 10:31:11

标签: css angularjs date

我有一个数组,其中包含当前日期的下5个日期和前5个日期的日期,当页面加载时我需要添加一个类.active当前日期。

我正在使用狡猾的插件[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;
  }
  

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

在页面加载时如何添加活动类。

2 个答案:

答案 0 :(得分:1)

首先不需要#video-bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; } #video-bg > video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* 1. No object-fit support: */ @media (min-aspect-ratio: 16/9) { #video-bg > video { height: 300%; top: -100%; } } @media (max-aspect-ratio: 16/9) { #video-bg > video { width: 300%; left: -100%; } } /* 2. If supporting object-fit, overriding (1): */ @supports (object-fit: cover) { #video-bg > video { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } } 超过ng-model='SELDATE'

您可以将li用于此类案例

ng-class

答案 1 :(得分:1)

您可以使用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>