angularjs – 页面上的许多UI-Bootstrap-Datepickers加载速度非

发布时间：2020-12-17 07:10:46 所属栏目：安全来源：网络整理

导读：我有很多行使用’ng-repeat’显示.每行有2个UI-Bootstrap-Datepickers.当有很多行时,页面的加载速度非常慢. 我想只使用一个日期选择器然后在用户点击的字段下动态移动它,或者可能在点击时加载指令并在选择完成后再次卸载它. 有关如何实现这一目标的任何想法

我有很多行使用’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>

解决方法

您可以使用ng-switch或ng-if. Ng-switch / ng-iff实际上将从DOM中删除其内部的任何内容,直到条件评估为true.

例如：

<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中使用它. (顺便说一句,ig你在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>

然后在有click事件时设置ng-include变量.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!