Sayfadaki birçok UI-Bootstrap-Datepickers çok yavaş yükleniyor - tek bir örneği kullanabilir ve öğeyi taşıyabilir miyim?

Question

'ng-repeat' ile görüntülenen birçok satırım var. Her sıra 2 x UI-Bootstrap-Datepicker içerir. Çok sayıda satır olduğunda, sayfanın yüklenmesi gerçekten yavaşlar.

Tek bir tarih seçicisini kullanmak ve daha sonra kullanıcının tıkladığı alana dinamik olarak taşımak veya bir seçim yapıldıktan sonra direksiyonu tıklatıp muhtemelen yeniden yüklemek istiyorum.

Bunu nasıl başarabileceğimiz hakkında bir fikrin var mı?

<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

ng-switch veya ng-if kullanabilirsiniz. Ng-switch/ng-iff, durum doğru olarak değerlendirilinceye kadar DOM içinde olan her şeyi kaldıracaktır. Örneğin

:

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

Bildirimi ticket.openCal = !ticket.openCal ng tıklama için ilave ve daha sonra ng -eğer o kullanıyor. (Eğer openAddStartCal bunun için yararlı bir şeyler var ig Btw, sadece o da kullanabilirsiniz.)

Alternatif olarak, böyle bir şey boş ng-şunlardır (satır tıklama kadar) kullanabilirsiniz:

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

Ardından tıklama etkinliği olduğunda ng-include değişkenini ayarlarsınız.