许多UI的引导，Datepickers上的页面加载速度非常缓慢 - 我可以用一个实例和移动元素？ [英] Many UI-Bootstrap-Datepickers on page loads very slowly - can I use a single instance and move element?
问题描述
我有很多行用'NG重复显示。每一行有2个UI的引导，Datepickers。当有许多行，页面的加载变得非常慢。
我想只使用一个单一的日期选择器，然后该用户点击进入该领域下的动态移动，或者可能在装载点击指令和选择完毕后再次卸载它。
我如何能做到这一点任何想法？
＆LT;李NG重复=票data.tickets＆GT; ＆LT; DIV NG点击=openAddStartCal（$事件，门票）NG隐藏=currentTicketUpdating == ticket.TicketId＆放大器;＆安培; currentParameterUpdating =='startCal'和;＆安培; startCalSaving ==真正的＆GT;
＆LT;输入类型=文本
开始日=2
显示按钮栏=假
演出周=假
类=的形式控制addTicketDateInput
日期选择器，弹出=DD MMM
NG-模式=ticket.StartDate
NG-变化=saveEditStartDate（票）
是开=checkStartOpened（票）
闽日期=
MAX-日期='2015年6月22日'
日期选择器选项=dateOptions
日期禁用=禁用（日期模式）
NG-所需=真
密文=关闭/＆GT;
＆LT; / DIV＆GT;
＆LT; /李＆GT;
您可以使用NG-开关或NG-IF。直到条件的值为true吴开关/ NG-IFF实际上会从德DOM消除任何在里面吧。
例如：
＆LT;李NG重复=票data.tickets＆GT;
＆LT; DIV NG点击=openAddStartCal（$事件，票！）; ticket.openCal = ticket.openCalNG隐藏=currentTicketUpdating == ticket.TicketId＆放大器;＆安培; currentParameterUpdating =='startCal'和;＆安培; startCalSaving ==真正的＆GT;
＆LT; DIV NG-IF =ticket.openCal＆GT;
＆LT;输入类型=文本
开始日=2
显示按钮栏=假
演出周=假
类=的形式控制addTicketDateInput
日期选择器，弹出=DD MMM
NG-模式=ticket.StartDate
NG-变化=saveEditStartDate（票）
是开=checkStartOpened（票）
闽日期=
MAX-日期='2015年6月22日'
日期选择器选项=dateOptions
日期禁用=禁用（日期模式）
NG-所需=真
密文=关闭/＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /李＆GT;
注意 ticket.openCal =！ticket.openCal 除NG单击，然后使用在NG-IF。 （顺便说一句，IG你有这个东西有用openAddStartCal，你可以使用它。）
另外，你也可以使用像空NG-包括（直到行点击）：
＆LT;李NG重复=票data.tickets＆GT;
＆LT; DIV NG点击=openAddStartCal（$事件，票！）; ticket.openCal = ticket.openCalNG隐藏=currentTicketUpdating == ticket.TicketId＆放大器;＆安培; currentParameterUpdating =='startCal'和;＆安培; startCalSaving ==真正的＆GT; ＆LT; DIV NG-包括=＆GT;＆LT; / DIV＆GT;
＆LT; /李＆GT;
然后，设置NG-包括变量时有点击的事件。
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的引导，Datepickers上的页面加载速度非常缓慢 - 我可以用一个实例和移动元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
