Viele UI-Bootstrap-Datepickers auf Seite lädt sehr langsam - kann ich eine einzelne Instanz verwenden und Element verschieben?

Question

Ich habe viele Zeilen mit 'ng-repeat' angezeigt. Jede Zeile hat 2 x UI-Bootstrap-Datepickers. Wenn viele Zeilen vorhanden sind, wird das Laden der Seite sehr langsam.

Ich möchte nur einen einzelnen Datumsauswahlpunkt verwenden und dann dynamisch unter dem Feld, in das der Benutzer geklickt hat, verschieben, oder möglicherweise die Anweisung beim Klicken laden und nach einer Auswahl wieder entladen.

Irgendwelche Ideen, wie ich das erreichen kann?

<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

Sie können ng-switch oder ng-if verwenden. Ng-switch/ng-iff entfernt tatsächlich alles, was darin enthalten ist, aus dem DOM, bis die Bedingung wahr ist.

Zum Beispiel:

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

Beachten Sie die ticket.openCal = !ticket.openCal zusätzlich zu dem ng-Klick und dann mit, dass in ng-wenn. (Btw, ig Sie etwas Nützliches für diese in openAddStartCal haben, können Sie nur diese verwenden.)

Alternativ können Sie auch so etwas wie leer ng-include (bis zum Zeilen Klick) verwenden können:

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

Dann legen Sie die ng-include-Variable fest, wenn das click-Ereignis vorhanden ist.