Question

我正在加载一个主ng-repeat，它有两个带有大数据集的嵌套ng-repeat。显示父记录的想法。然后，用户可以点击父记录以查看第二级详细信息。然后，用户可以在第二级再次标记以查看更多详细信息。总共有三个ng重复。

当angular将数据绑定到DOM元素时，屏幕会冻结几秒钟。

我需要以某种方式解决这个问题，这样它就不会冻结。我认为我的选择是分页或按需加载子重复。后端是一个sqlite数据库。

以下是plunkr http://embed.plnkr.co/NdipQQO2XiCGoIr00mGH/ ：

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="ionic.css">
  <script src="http://code.ionicframework.com/1.0.0-beta.11/js/ionic.bundle.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app='todo'>
  <ion-pane>
    <ion-content ng-controller="MyCtrl" padding="false" class="has-header">
      <div class="bg-overlay"></div>
      <div class="content-wrap">

        <div class="container padding" style="background-color: #fff;" ng-show="gridData.length > 0">
          <div class="row">
            <div class="col col-75" style="font-weight: bold !important;">
              Department / Product Type
            </div>
            <div class="col col-25" style="font-weight: bold !important;">
              Qty
            </div>
          </div>

          <div ng-repeat="item in gridData | orderBy:'-qty'" style="padding:0px;margin: 0;" ng-init="show = false">
            <div class="row" ng-class-odd="'odd'" ng-class-even="'even'">
              <div class="col col-75" style="padding:0;margin:0;" ng-click="show = !show">
                {{item.departmentName}} - {{item.productTypeName}} (Click here)
              </div>
              <div class="col col-25" align="center" valign="middle" style="font-size: 14px;font-weight:bold;padding:0;margin:0;">
                {{item.qty}}
              </div>
            </div>
            <div ng-repeat="style in item.styles" style="padding:0;margin: 0;border: 1px solid #eee;" ng-show="show" ng-init="show2 = false">
              <div class="row">
                <div class="col" style="margin-left: 5% !important;border-top-width:0;border-bottom-width:0;" ng-click="show2 = !show2">
                  {{style.styleNum}} ({{style.qty}})  (Click here)
                </div>
              </div>
              <div class="row" ng-show="show2">
                <div class="col col-5" style="border:0"></div>
                <div class="col col-5" style="border-left:0;border-bottom:0;border-right:0;"></div>
                <div class="col col-25"><b>Color</b></div>
                <div class="col col-15"><b>Size</b></div>
                <div class="col"><b>Product#</b></div>
              </div>
              <div ng-repeat="styleLine in style.details" ng-show="show2">
                <div class="row">
                  <div class="col col-10" style="border:0;"></div>
                  <div class="col col-25">{{styleLine.color}} ({{styleLine.qty}})</div>
                  <div class="col col-15">{{styleLine.size}}</div>
                  <div class="col">{{styleLine.productNum}}</div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </ion-content>
  </ion-pane>

</body>

</html>

JS（我把数据部分留了下来，因为它非常大，可以粘贴。它可以在plunkr中使用）

angular.module('todo', ['ionic'])
.controller('MyCtrl', function($scope) {
$scope.gridData = ...
});

拔毛器工作正常而不会冻结屏幕。但是在我的iPod上它会冻结，显然如果我有10,000个物品，这个解决方案将无法很好地扩展。

当用户点击标题以查看子详细信息时，如何通过使用分页或按需加载数据来解决此问题，而无需再次重新绑定整个网格？当使用按需加载时，我最好只获取该特定父级的详细信息，并以某种方式动态插入ng-repeat，而不必再次重新加载所有内容。希望有道理。

Answer 1

Angular为html中的表达式创建观察者，众所周知，超过2000个watxhers一次性能影响很大，我不知道你使用的数据显然是你达到了2000分，所以我们需要减少你拥有的观察者数量。让我们开始更换你必须的所有ng-show - 如果它能够快速提高你的表现，其次你应该想一想，如果你可以在你的代码中进行一次性绑定，那就像{{:: expression}}一样使用一次时间绑定它不会创建一个新的观察者，如果你有一些你绑定的值，他们不应该在运行时更改你应该使用一次性绑定，最后但并非最不重要的是，当你使用ng-repeat总是使用'track by $ index'时，如果重复列表是交互式的，那么会产生巨大的性能影响，你应该在这里更多地阅读它 - https://docs.angularjs.org/api/ng/directive/ngRepeat

祝你好运！

在角度和离子

1 个答案: