Many UI-Bootstrap-Datepickers on a page load very slowly - can I use one instance and a move element?

Question

I have many lines displayed using 'ng-repeat'. Each row has 2 x UI-Bootstrap-Datepickers. When there are many lines, page loading becomes very slow.

I would just like to use one datepicker, and then dynamically move it under the field that the user clicked, or maybe load the directive on click and unload it again after selection.

Any ideas on how I can achieve this?

<li ng-repeat="ticket in data.tickets"> <div ng-click="openAddStartCal($event, ticket)" ng-hide="currentTicketUpdating == ticket.TicketId && currentParameterUpdating =='startCal' && startCalSaving == true"> <input type="text" starting-day="2" show-button-bar="false" show-weeks="false" class="form-control addTicketDateInput" datepicker-popup="dd MMM" ng-model="ticket.StartDate" ng-change="saveEditStartDate(ticket)" is-open="checkStartOpened(ticket)" min-date="" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" /> </div> </li> 

Answer 1

You can use ng-switch or ng-if. Ng-switch / ng-iff will actually remove everything inside it from the DOM until the condition is true.

For instance:

 <li ng-repeat="ticket in data.tickets"> <div ng-click="openAddStartCal($event, ticket);ticket.openCal = !ticket.openCal" ng-hide="currentTicketUpdating == ticket.TicketId && currentParameterUpdating =='startCal' && startCalSaving == true"> <div ng-if="ticket.openCal"> <input type="text" starting-day="2" show-button-bar="false" show-weeks="false" class="form-control addTicketDateInput" datepicker-popup="dd MMM" ng-model="ticket.StartDate" ng-change="saveEditStartDate(ticket)" is-open="checkStartOpened(ticket)" min-date="" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" /> </div> </div> </li> 

Note the addition of ticket.openCal = !ticket.openCal to an ng-click, and then using this in ng-if. (Btw, ig you have something useful for this in openAddStartCal, you can just use this.)

Alternatively, you can also use something like empty ng-include (until the line is clicked):

 <li ng-repeat="ticket in data.tickets"> <div ng-click="openAddStartCal($event, ticket);ticket.openCal = !ticket.openCal" ng-hide="currentTicketUpdating == ticket.TicketId && currentParameterUpdating =='startCal' && startCalSaving == true"> <div ng-include=""></div> </li> 

Then you set the ng-include variable when there is a click event.