页面上的许多 UI-Bootstrap-Datepicker 加载速度非常慢 - 我可以使用单个实例并移动元素吗? [英] Many UI-Bootstrap-Datepickers on page loads very slowly - can I use a single instance and move element?
问题描述
我使用ng-repeat"显示了很多行.每行有 2 个 UI-Bootstrap-Datepickers.当有很多行时,页面加载会变得很慢.
我想只使用一个日期选择器,然后在用户点击的字段下动态移动它,或者可能在点击时加载指令并在选择后再次卸载它.
关于如何实现这一目标的任何想法?
<div ng-click="openAddStartCal($event, ticket)" ng-hide="currentTicketUpdating == ticket.TicketId && currentParameterUpdating =='startCal' && startCalSaving == true"><输入类型="文本"起始日=2"显示按钮栏=假"显示周=假"class="form-control addTicketDateInput"datepicker-popup="dd MMM"ng-model="ticket.StartDate"ng-change="saveEditStartDate(ticket)"is-open="checkStartOpened(ticket)"最小日期=""max-date="'2015-06-22'"datepicker-options="dateOptions"日期禁用=禁用(日期,模式)"ng-required="true"close-text="关闭"/>
您可以使用 ng-switch 或 ng-if.Ng-switch/ng-iff 实际上会从 DOM 中删除其中的任何内容,直到条件评估为真.
例如:
<div ng-click="openAddStartCal($event, ticket);ticket.openCal = !ticket.openCal" ng-hide="currentTicketUpdating == ticket.TicketId && currentParameterUpdating =='startCal' &&startCalSaving == true"><div ng-if="ticket.openCal"><输入类型="文本"起始日=2"显示按钮栏=假"显示周=假"class="form-control addTicketDateInput"datepicker-popup="dd MMM"ng-model="ticket.StartDate"ng-change="saveEditStartDate(ticket)"is-open="checkStartOpened(ticket)"最小日期=""max-date="'2015-06-22'"datepicker-options="dateOptions"日期禁用=禁用(日期,模式)"ng-required="true"close-text="关闭"/>
注意 ticket.openCal = !ticket.openCal
添加到 ng-click 然后在 ng-if 中使用它.(顺便说一句,你在 openAddStartCal 中有一些有用的东西,你可以使用它.)
或者,您也可以使用类似空的 ng-include(直到行单击):
<div ng-click="openAddStartCal($event, ticket);ticket.openCal = !ticket.openCal" ng-hide="currentTicketUpdating == ticket.TicketId && currentParameterUpdating =='startCal' &&startCalSaving == true"><div ng-include=""></div>
然后在有点击事件时设置 ng-include 变量.
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>
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.
这篇关于页面上的许多 UI-Bootstrap-Datepicker 加载速度非常慢 - 我可以使用单个实例并移动元素吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!