我有一个数组,其中包含当前日期的下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'}
];
在页面加载时如何添加活动类。
答案 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>