Question

我知道ng-repeat性能是一个问题，但我并不认为我只使用少于10个项目来面对它！因为我也是AngularJS的初学者，所以我可能会做错的事情。那么我们去哪里：

HTML：

<table class="table" ng-show="rows.length > 0">
            <thead>
                <tr>
                    <th></th>
                    <th></th>
                    <th>Codice</th>
                    <th>Desc.</th>
                    <th>Tipo</th>
                    <th>N. Titoli</th>
                    <th>N. Pz. Totali</th>
                    <th>N. Pz. Bollettati</th>
                    <th>N. PDV</th>
                    <th>Valore</th>
                    <th>Ingresso Prevista</th>
                    <th>Prevista Bollettazione</th>
                    <th>Fine Lavorazione Prevista</th>
                    <th>Fine Lavorazione Effettiva</th>
                    <th>Consegna Vettore</th>
                    <th>Consegna Prevista</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="row in rows | limitTo: limit track by row.Code">
                    <td><img src="@Url.Content("~/Content/ajax-loader.gif")" alt="Loading..." ng-show="loadRow[$index]" /></td>
                    <td>
                        <button class="btn btn-default" ng-click="toggleRow($index)">
                            <span class="glyphicon glyphicon-pencil" style="vertical-align:middle"></span>
                        </button>
                        <button class="btn btn-default" ng-click="save(row, $index)" ng-disabled="!enableRow[$index]">
                            <span class="glyphicon glyphicon-floppy-disk" style="vertical-align:middle"></span>
                        </button>
                    </td>
                    <td><button class="btn btn-default" data-toggle="modal" data-target="#productModal" 
                                ng-click="getProducts(row, $index)">
                            {{row.Code}}
                        </button>
                    </td>
                    <td>{{row.Description}}</td>
                    <td>{{row.Type}}</td>
                    <td>{{row.NumTitle}}</td>
                    <td>{{row.TotQty}}</td>
                    <td>{{row.TotBollettatoQty}}</td>
                    <td><button class="btn btn-default" data-toggle="modal" data-target="#pdvModal"
                                ng-click="getPdvs(row, $index)">
                            {{row.TotPdv}}
                        </button>
                    </td>
                    <td>{{row.TotValue | currency }}</td>
                    <td>
                        <span ng-show="!enableRow[$index]"> {{ row.ManageData.PrevistaEntryDate | jsonDate }} </span>
                        <input ng-hide="!enableRow[$index]" type="text" ng-stringyDate datepicker-popup="{{format}}" is-open="open[$index]" ng-click="open[$index] = true" ng-model="row.ManageData.PrevistaEntryDate" />
                    </td>
                    <td>
                        <span ng-show="!enableRow[$index]"> {{ row.ManageData.BollettazionePrevistaDate | jsonDate }} </span>
                        <input ng-hide="!enableRow[$index]" type="text" ng-stringyDate datepicker-popup="{{format}}" is-open="open[$index + 1]" ng-click="open[$index + 1] = true" ng-model="row.ManageData.BollettazionePrevistaDate" />
                    </td>
                    <td>
                        <span ng-show="!enableRow[$index]"> {{ row.ManageData.FineLavorazionePrevistaDate | jsonDate }} </span>
                        <input ng-hide="!enableRow[$index]" type="text" ng-stringyDate datepicker-popup="{{format}}" is-open="open[$index + 2]" ng-click="open[$index + 2] = true" ng-model="row.ManageData.FineLavorazionePrevistaDate" />
                    </td>
                    <td>{{row.FineLavorazioneEffettivaDate | jsonDate }}</td>
                    <td>{{row.ConsegnaVettoreDate  | jsonDate }}</td>
                    <td>{{row.ExpectedConsegnaDate | jsonDate }}</td>
                </tr>
            </tbody>
        </table>

那里有一些自定义指令：

JS：

angular.module('jsonDate', []).filter('jsonDate', function () {
    return function (input) {
        return jsonToStringDate(input);
    };
});

var app = angular.module("myApp", ['jsonDate', 'ui.bootstrap', 'infinite-scroll']);

app.directive("ngStringydate", function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attrs, ngModelController) {
            ngModelController.$parsers.push(function (data) {
                //convert data from view format to model format

                if (data instanceof Date) {
                    data = data.toISOString();
                }

                return data; //converted
            });

            ngModelController.$formatters.push(function (data) {
                //convert data from model format to view format
                return jsonToStringDate(data);
            });
        }
    };
});

IE渲染表大约需要4-6秒。毋庸置疑，它在Firefox上的速度非常快（不到一秒钟）。

谢谢！

Answer 1

似乎问题的根源在于angular.ui datepicker！我松了一口气。

IE10中的ng-repeat慢（少于10行）

1 个答案: