javascript - How to keep current month on top of list, when using ng-repeat in angularjs -
i have list of holidays , using ng-repeat show on html. working fine need current month's holidays(or upcoming) on top of list how that.... me
my list is
$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" } ];
this markup
<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>
use orderby: 'startdate':true
sort holidays. reverse argument boolean value.
<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>
Comments
Post a Comment