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

Question

I have many rows displayed using 'ng-repeat'. Each row has 2 x UI-Bootstrap-Datepickers. When there are many rows, the loading of the page gets really slow.

I would like to just use a single datepicker and then move it dynamically under the field that the user has clicked into, or possibly load the directive on click and unload it again after a selection has been made.

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 whatever is inside it from teh DOM until the condition evaluates to true.

For example:

<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>

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

Alternatively, you can also use something like empty ng-include (until the row-click):

<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 the click event.