在 angularjs 中使用 ng-repeat 时如何将当前月份保持在列表顶部
How to keep current month on top of list, when using ng-repeat in angularjs
我有假期列表,我正在使用 ng-repeat 在 html 上显示它。
它工作正常,但我需要在列表顶部列出当前月份的假期(或即将到来的假期)如何做到这一点....帮助我
我的名单是
$scope.holidaylist =
[
{
"lineId":0,
"holidayMasterId":0,
"holidayName":"NewYear",
"startDate":"2016-01-01T00:00:00",
"endDate":"2016-01-01T00:00:00",
"startDay":"Friday"
},
{
"lineId":0,
"holidayMasterId":0,
"holidayName":"Sankranthi",
"startDate":"2016-01-15T00:00:00",
"endDate":"2016-01-15T00:00:00",
"startDay":"Friday"
},
{
"lineId":0,
"holidayMasterId":0,
"holidayName":"Ugadi",
"startDate":"2016-04-04T00:00:00",
"endDate":"2016-04-04T00:00:00",
"startDay":"Monday"
},
{
"lineId":0,
"holidayMasterId":0,
"holidayName":"Ugadi",
"startDate":"2016-04-05T00:00:00",
"endDate":"2016-04-05T00:00:00",
"startDay":"Tuesday"
},
{
"lineId":0,
"holidayMasterId":0,
"holidayName":"Ugadi",
"startDate":"2016-04-06T00:00:00",
"endDate":"2016-04-06T00:00:00",
"startDay":"Wednesday"
},
{
"lineId":0,
"holidayMasterId":0,
"holidayName":"Ugadi",
"startDate":"2016-04-07T00:00:00",
"endDate":"2016-04-07T00:00:00",
"startDay":"Thursday"
},
{
"lineId":0,
"holidayMasterId":0,
"holidayName":"Ugadi",
"startDate":"2016-04-08T00:00:00",
"endDate":"2016-04-08T00:00:00",
"startDay":"Friday"
}
];
这是我的标记
<li ng-if="holidaylist!=null" class="order-item" ng-repeat="holiday in holidaylist">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 item-left">
<div class="item-booker">{{holiday.holidayName}}</div>
<div class="item-time">
<i class="fa fa-calendar"></i>
<span>{{holiday.startDate | date:'dd-MM-yyyy'}}</span>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 item-right">
<div class="item-price">
<span class="price">{{holiday.startDay}}</span>
</div>
</div>
</div>
</li>
使用orderBy: 'startDate':true
对假期进行排序。
反向参数是一个布尔值。
<li ng-if="holidaylist!=null" class="order-item" ng-repeat="holiday in holidaylist | orderBy: 'startDate':true">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 item-left">
<div class="item-booker">{{holiday.holidayName}}</div>
<div class="item-time">
<i class="fa fa-calendar"></i>
<span>{{holiday.startDate | date:'dd-MM-yyyy'}}</span>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 item-right">
<div class="item-price">
<span class="price">{{holiday.startDay}}</span>
</div>
</div>
</div>
</li>
我有假期列表,我正在使用 ng-repeat 在 html 上显示它。 它工作正常,但我需要在列表顶部列出当前月份的假期(或即将到来的假期)如何做到这一点....帮助我
我的名单是
$scope.holidaylist =
[
{
"lineId":0,
"holidayMasterId":0,
"holidayName":"NewYear",
"startDate":"2016-01-01T00:00:00",
"endDate":"2016-01-01T00:00:00",
"startDay":"Friday"
},
{
"lineId":0,
"holidayMasterId":0,
"holidayName":"Sankranthi",
"startDate":"2016-01-15T00:00:00",
"endDate":"2016-01-15T00:00:00",
"startDay":"Friday"
},
{
"lineId":0,
"holidayMasterId":0,
"holidayName":"Ugadi",
"startDate":"2016-04-04T00:00:00",
"endDate":"2016-04-04T00:00:00",
"startDay":"Monday"
},
{
"lineId":0,
"holidayMasterId":0,
"holidayName":"Ugadi",
"startDate":"2016-04-05T00:00:00",
"endDate":"2016-04-05T00:00:00",
"startDay":"Tuesday"
},
{
"lineId":0,
"holidayMasterId":0,
"holidayName":"Ugadi",
"startDate":"2016-04-06T00:00:00",
"endDate":"2016-04-06T00:00:00",
"startDay":"Wednesday"
},
{
"lineId":0,
"holidayMasterId":0,
"holidayName":"Ugadi",
"startDate":"2016-04-07T00:00:00",
"endDate":"2016-04-07T00:00:00",
"startDay":"Thursday"
},
{
"lineId":0,
"holidayMasterId":0,
"holidayName":"Ugadi",
"startDate":"2016-04-08T00:00:00",
"endDate":"2016-04-08T00:00:00",
"startDay":"Friday"
}
];
这是我的标记
<li ng-if="holidaylist!=null" class="order-item" ng-repeat="holiday in holidaylist">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 item-left">
<div class="item-booker">{{holiday.holidayName}}</div>
<div class="item-time">
<i class="fa fa-calendar"></i>
<span>{{holiday.startDate | date:'dd-MM-yyyy'}}</span>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 item-right">
<div class="item-price">
<span class="price">{{holiday.startDay}}</span>
</div>
</div>
</div>
</li>
使用orderBy: 'startDate':true
对假期进行排序。
反向参数是一个布尔值。
<li ng-if="holidaylist!=null" class="order-item" ng-repeat="holiday in holidaylist | orderBy: 'startDate':true">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 item-left">
<div class="item-booker">{{holiday.holidayName}}</div>
<div class="item-time">
<i class="fa fa-calendar"></i>
<span>{{holiday.startDate | date:'dd-MM-yyyy'}}</span>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 item-right">
<div class="item-price">
<span class="price">{{holiday.startDay}}</span>
</div>
</div>
</div>
</li>