通过使用ng if更新ng repeat加载程序

Loader by updating ng-repeat with ng-if

本文关键字：ng repeat 加载 程序 更新 if      更新时间：2024-05-07

首先，这是我的小提琴，这样你就可以理解我的问题：https://jsfiddle.net/860Ltbva/5/

我想在加载循环ng repeat时显示一条加载消息，并在加载所有元素时隐藏它。

我用这把小提琴来帮助：http://jsfiddle.net/jwcarroll/ZFp3a/

此代码使用指令来知道何时加载最后一个元素：

app.directive("repeatEnd", function() {
  return {
    restrict: "A",
    link: function(scope, element, attrs) {
      if (scope.$last) {
        scope.$eval(attrs.repeatEnd);
      }
    }
  };
});

第一个问题：

只有当我加载每个元素时，这才有效，但我使用ng if来过滤它，这就是我遇到一些问题的地方。因为如果最后一个元素没有加载，那么$scope$最后一个不是真的。因此，与其每次都隐藏加载程序并在加载后删除它，不如只在一种情况下删除它。

HTML：

<div class="test" ng-repeat="light in lights" ng-if="showLights(light.status)" repeat-end="onEnd()">
<span>{{light.name}} - {{light.status}}</span></div>

控制器：

app.controller("MyCtrl", function($scope, $timeout) {
  $scope.lights = [];
  $scope.loadingPatients = true;
  $scope.showStatus = 'on';
 for (var x = 0; x < 10000; x=x+2) {
    $scope.lights[x] = {'name': 'kitchen', 'status':'off'};
    $scope.lights[x+1] = {'name': 'living room', 'status':'on'};
  }
  $scope.showStatusFct = function(status){
    $scope.loadingPatients = true;
    $scope.showStatus = status;
  };
  $scope.showLights = function(lightStatus) {
    if ($scope.showStatus == 'on') {
      if (lightStatus == 'on')
        return true;
    } else {
      if (lightStatus == 'off')
        return true;
    }
  }
  $scope.onEnd = function() {
    $scope.loadingPatients = false;
  };
});

第二个问题

变量$scope.loadingPatients在文件加载后会更新，而不是在我点击后立即更新，这很奇怪，因为你看不到加载程序

对这些问题有什么想法吗？感谢

过了一段时间，我终于找到了解决方案。我不确定它是最好的，但性能更好，装载机也能工作。

为此，我使用了angular的$interval方法，并在ng重复循环中使用了filter和limitTo。我终于去掉了ng if。

这是新小提琴：https://jsfiddle.net/timguignard/7p3rayjr/11/

由于间隔，我只是每隔几秒钟增加一次limitTo，这使ng重复进行得更快，也使加载程序工作。它一加载页面就开始加载，你不会看到ng在一开始就重复冻结。

实际上，我最后的建议是不要使用太长的ng重复，并最大限度地使用limitTo。在这个例子中，limitTo等于对象的长度，但如果我放入100000个对象，当你更改过滤器时，它仍然会使应用程序冻结一段时间。如果我把上限设定为1000甚至10000，你不会看到它冻结。

这是代码：

HTML

<div ng-controller="MyCtrl">
  <button ng-click="upFilter('on')">Show lights ON</button>
  <button ng-click="upFilter('off')">Show lights OFF</button>
  <div ng-show="loadingWait">==LOADING==</div>
  <div ng-hide="loadingWait">==LOADED==</div>
  Limit lights: {{limitLights}} - Max all lights: {{maxLights}}
  <div class="test" ng-repeat="light in lights | filter : filter | limitTo:limitLights">
      <span>{{light.name}} - {{light.status}}</span>
   </div>
</div>

和Javascript

(function() {
    angular.element(document).ready(function() {
    var app = angular.module('myApp', []);
    app.controller("MyCtrl", function($scope, $interval) {
      $scope.lights = [];
      $scope.loadingWait = true;
      //set the data
      for (var x = 0; x < 10000; x = x + 2) {
        $scope.lights[x] = {
          'name': 'kitchen',
          'status': 'off'
        };
        $scope.lights[x + 1] = {
          'name': 'living room',
          'status': 'on'
        };
      }
      $scope.maxLights = $scope.lights.length;
      $scope.upFilter = function(stat) {
        $scope.loadingWait = true;
        $scope.filter = {
          status: stat
        };
        loading();
      }
      loading();
      //login with interval
      var myInterval;
      function loading() {
        $scope.loadingWait = true;
        $scope.limitLights = 1;
        myInterval = $interval(function() {
          if ($scope.limitLights > $scope.lights.length) {
             $interval.cancel(myInterval);
             myInterval = undefined;
             $scope.loadingWait = false;
          }
          $scope.limitLights += 1000;
        }, 100)
      }
    });
   //to make the fiddle work
   angular.bootstrap(document, ['myApp']);
  });
}());

如果有人需要，希望它能有所帮助。如果你有更好的解决方案，请随时在下面分享，我会检查的！

我还找到了这把小提琴，它似乎是一个更好的选择。我也会试着检查一下：http://jsfiddle.net/nikospara/b8thjobp/

相关文章：