首先,这是我的小提琴,这样你就可以理解我的问题: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/