angularjs - 页面上的许多 UI-Bootstrap-Datepicker 加载速度非常慢 - 我可以使用单个实例并移动元素吗？

Question

我使用“ng-repeat”显示了很多行。每行有 2 个 UI-Bootstrap-Datepickers。当有很多行时，页面的加载会变得非常缓慢。

我想只使用一个日期选择器，然后在用户单击的字段下动态移动它，或者可能在单击时加载指令并在选择后再次卸载它。

关于如何实现这一目标的任何想法？

<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 或 ng-if。 Ng-switch/ng-iff 实际上会从 DOM 中删除其中的任何内容，直到条件评估为真。

例如:

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

注意 ticket.openCal = !ticket.openCal除了 ng-click 然后在 ng-if 中使用它。 (顺便说一句，你在 openAddStartCal 中有一些有用的东西，你可以使用它。)

或者，您也可以使用类似空的 ng-include(直到单击行):

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

然后在有点击事件时设置 ng-include 变量。