许多AngularUI Datepicker使页面性能低下

时间:2015-10-28 07:32:15

标签: angularjs datepicker angular-ui angular-ui-bootstrap angular-ui-datepicker

我正在使用AngularUI Datepicker。我有部分视图,每个都有ng-repeat。我使用的是AngularUI-Bootstrap-Datepickers,它使页面加载速度非常慢。

我按照这个回答: Many UI-Bootstrap-Datepickers on page loads very slowly - can I use a single instance and move element?

但是我还有其他一些问题。在这种方法中,我们使用单独的ng-if从span切换到文本框。但是在它们之间切换需要相当长的时间才能让用户看到我们正在玩文本框。(查看图片 http://i.stack.imgur.com/YxZXQ.png

我也遵循了这个:https://github.com/angular-ui/bootstrap/pull/3666/commits

但我无法集成更改并成功运行datepicker。

这个问题有没有可靠的解决方案?

1 个答案:

答案 0 :(得分:0)

Many UI-Bootstrap-Datepickers on page loads very slowly - can I use a single instance and move element?

   <p class="input-group">
    <span class="form-control" ng-if="!date.opened1">{{date.data1|date:format}}</span>
    <input type="text" class="form-control"
           ng-if="date.opened1" datepicker-popup="{{format}}" ng-model="date.data1"
           is-open="date.opened1"
           datepicker-options="dateOptions"
           close-text="Close"/>
        <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open($event, date,1)">
                <i class="glyphicon glyphicon-calendar"></i>
            </button>
        </span>
</p>

$scope.open = function($event,date,i) {
    $event.preventDefault();
    $event.stopPropagation();
    date['opened'+i] = !date['opened'+i];
 };

Plunkr link