我几天前请求帮助,为什么我的ng-repeat如此缓慢,我设法找出原因。我有3个md-tabs,点击它们来点击刷新我的数据,问题是在标签更改之前执行了ng-click,这导致了一些冻结。试图使用md-on-select,它会导致同样的问题。
使用for循环只是为了演示问题,在我的情况下冻结我使用http get ..
制作一个帮助你们的小伙伴:https://jsfiddle.net/twizzlers/vvstgg4g/3/
我的HTML:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<md-tabs md-dynamic-height md-border-bottom md-selected="selected_tab">
<md-tab label="zero" ng-click="load(0)">
<md-content class="md-padding">
<div ng-show="selected_tab == 0">
<div ng-include="'list1.html'"></div>
</div>
</md-content>
</md-tab>
<md-tab label="one" ng-click="load(1)">
<md-content class="md-padding">
<div ng-show="selected_tab == 1">
<div ng-include="'list2.html'"></div>
</div>
</md-content>
</md-tab>
<md-tab label="two" ng-click="load(2)">
<md-content class="md-padding">
<div ng-show="selected_tab == 2">
<div ng-include="'list3.html'"></div>
</div>
</md-content>
</md-tab>
</md-tabs>
</div>
</div>
<script type="text/ng-template" id="list1.html">
<div ng-if="showSpinner" layout="row" layout-align="center start">
<p></p>
<md-progress-circular ng-if="showSpinner" md-diameter="70"> </md-progress-circular>
</div>
<div ng-repeat="item in default_list">
<p>{{item.test}}</p>
</div>
</script>
<script type="text/ng-template" id="list3.html">
<div ng-if="showSpinner" layout="row" layout-align="center start">
<p></p>
<md-progress-circular ng-if="showSpinner" md-diameter="70"></md-progress-circular>
</div>
<div ng-repeat="item in default_list">
<p>{{item.test}}</p>
</div>
</script>
<script type="text/ng-template" id="list2.html">
<div ng-if="showSpinner" layout="row" layout-align="center start">
<p></p>
<md-progress-circular ng-if="showSpinner" md-diameter="70"></md-progress-circular>
</div>
<div ng-repeat="item in default_list">
<p>{{item.test}}</p>
</div>
</script>
我的控制员:
var myApp = angular.module('myApp',['ngMaterial']);
myApp.controller("MyCtrl", ["$scope","$rootScope", "$mdDialog","$mdPanel",'$filter', '$http', function($scope, $rootScope, $mdDialog, $mdPanel, $filter, $http){
$scope.default_list = [];
$scope.list0 = [{test:"test111"}, {test2:"test2"}, {test3:"test3"}];
$scope.list1 = [{test:"test222"}, {test2:"test2"}, {test3:"test3"}];
$scope.list2 = [{test:"test333"}, {test2:"test2"}, {test3:"test3"}];
$scope.load = function(selected){
for(var i= 0; i < 2000; i++){
console.log("test");
}
$scope.showSpinner = true;
$http.get('/echo/json').then(function(value) {
$scope.showSpinner = false;
if(selected == 0){
$scope.default_list = $scope.list0;
}else if(selected == 1){
$scope.default_list = $scope.list1;
}else if(selected == 2){
$scope.default_list = $scope.list2;
}
});
}
$scope.load(0);
}
]);
这是否有解决方案或目前这是一个错误?