javascript 带有 $http 请求的材料角度无限滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33759185/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Material angular infinite scroll with $http request
提问by Asieh Mokarian
I'm using md-virtual-repeatdirective of Angular Materialto have an infinite scroll, and I need to replace it's demo$timeout function with a $http request. But I can't get to the right solution.
In the code below, infinite scroll works fine but doesn't show the data from http request. The problem is that I don't know the way of binding $http result to infiniteItems.
我正在使用md-virtual-repeat指令Angular Material来进行无限滚动，我需要用 $http 请求替换它的演示$timeout 函数。但我无法找到正确的解决方案。在下面的代码中，无限滚动工作正常，但不显示来自 http 请求的数据。问题是我不知道将 $http 结果绑定到infiniteItems 的方式。
Hereis the plunker.
这里是plunker。
Index.html
索引.html
<body ng-app="infiniteScrolling" class="virtualRepeatdemoInfiniteScroll">
<div ng-controller="AppCtrl as ctrl" ng-cloak>
<md-content layout="column">
<md-virtual-repeat-container id="vertical-container" flex>
<div md-virtual-repeat="item in ctrl.infiniteItems" md-on-demand
class="repeated-item" flex>
{{item.id}}
</div>
</md-virtual-repeat-container>
</md-content>
</div>
</body>
JS:
JS：
(function () {
'use strict';
angular
.module('infiniteScrolling', ['ngMaterial'])
.controller('AppCtrl', function ($timeout,$scope,$http) {
this.infiniteItems = {
numLoaded_: 0,
toLoad_: 0,
items:[],
getItemAtIndex: function (index) {
if (index > this.numLoaded_) {
this.fetchMoreItems_(index);
return null;
}
return index;
},
getLength: function () {
return this.numLoaded_ + 5;
},
fetchMoreItems_: function (index) {
if (this.toLoad_ < index) {
this.toLoad_ += 20;
$http.get('items.json').success(function (data) {
var items = data;
for (var i = 0; i < items.length; i++) {
this.items.push(items[i].data);
}
this.numLoaded_ = this.toLoad_;
}.bind(this));
}
}
};
});
})();
回答by Alessandro Buggin
This one works:
这个有效：
- getItemAtIndex returned the index and not the item
- if you inspected what you pushed, you'd see that at line 33 in my plunkr I concat
obj.data, not plainobj
- getItemAtIndex 返回索引而不是项目
- 如果你检查你推送的内容，你会在我的 plunkr 的第 33 行看到我 concat
obj.data，而不是普通obj
(function () {
'use strict';
angular.module('infiniteScrolling', ['ngMaterial'])
.controller('AppCtrl', function ($scope, $http) {
// In this example, we set up our model using a plain object.
// Using a class works too. All that matters is that we implement
// getItemAtIndex and getLength.
var vm = this;
vm.infiniteItems = {
numLoaded_: 0,
toLoad_: 0,
items: [],
// Required.
getItemAtIndex: function (index) {
if (index > this.numLoaded_) {
this.fetchMoreItems_(index);
return null;
}
return this.items[index];
},
// Required.
getLength: function () {
return this.numLoaded_ + 5;
},
fetchMoreItems_: function (index) {
if (this.toLoad_ < index) {
this.toLoad_ += 5;
$http.get('items.json').then(angular.bind(this, function (obj) {
this.items = this.items.concat(obj.data);
this.numLoaded_ = this.toLoad_;
}));
}
}
}
})
})();
回答by Raju Donthula
On every api call try to get wheather the db has few more records or not. and add that condition in fetchMoreItems_ function.
在每次 api 调用中尝试获取数据库是否有更多记录。并在 fetchMoreItems_ 函数中添加该条件。
fetchMoreItems_: function (index) {
if (this.toLoad_ < index && hasMoreRecords) {
this.toLoad_ += 5;
In our code we get the details like
在我们的代码中，我们得到了这样的细节
- sCurrentPage : 3
- sMore: true ==>>this indicates that the db has more records or not after fetching page wise data.
- sTotalPages: 4
- sTotalRecords : 36
- 当前页面：3
- sMore: true ==>>这表明数据库在获取页面数据后是否有更多记录。
- sTotalPages: 4
- sTotalRecords : 36
回答by paulie
came here and saw @alessandro-buggin answer which was very helpful. I had to change it a little bit, so I thought of sharing it for others to help. I needed:
来到这里，看到了@alessandro-buggin 的回答，这非常有帮助。我不得不稍微改变它，所以我想把它分享给其他人以帮助。我需要：
- to avoid getting scroll requests while already recovering data (using
this.hold) - stopping requests when the whole data was received from the backend (using
this.stop_) - hiding the content while loading, to avoid glitches or empty elements (again using
this.hold). On the view you need to useng-hideon that element becauseng-ifavoid the element to ever exist so it won't load the first time. - implementing a refresh method to reload data when parameters/filters changed from an outside form.
- 避免在已经恢复数据的同时收到滚动请求（使用
this.hold） - 当从后端接收到整个数据时停止请求（使用
this.stop_） - 在加载时隐藏内容，以避免出现故障或空元素（再次使用
this.hold）。在视图上，您需要ng-hide在该元素上使用，因为ng-if避免该元素永远存在，因此它不会第一次加载。 - 当参数/过滤器从外部表单更改时，实现刷新方法以重新加载数据。
Far from perfect but works pretty well.
远非完美，但效果很好。
vm.elements = null;
vm.infiniteItems = { // Start of infinte logic
stop_: false,
hold: false,
numLoaded_: 0,
toLoad_: 0,
items: [],
refresh: function() {
this.stop_ = false;
this.hold = false;
this.numLoaded_ = 0;
this.toLoad_ = 0;
this.items = [];
},
getItemAtIndex: function (index) {
if (!this.hold) {
if (index > this.numLoaded_) {
this.fetchMoreItems_(index);
return null;
}
}
return this.items[index];
},
getLength: function () {
if (this.stop_) {
return this.items.length;
}
return this.numLoaded_ + 5;
},
fetchMoreItems_: function (index) {
if (this.toLoad_ < index) {
this.hold = true;
this.toLoad_ += 5;
var start = this.numLoaded_;
if (start > 0) start++;
MyService.getData(parameters)
.then(angular.bind(this, function (obj) {
if (obj && obj.elements > 0) {
vm.elements = obj.elements;
this.items = this.items.concat(obj.data);
if (obj.elements < this.toLoad_) {
this.stop_ = true;
}
this.numLoaded_ = this.items.length;
this.hold = false;
} else { // if no data
vm.elements = 0;
}
}));
}
}
} // End of infinte logic
Note: my service returns an object composed like this:
obj = {elements: INTEGER, data: ARRAY}where elements tells you the length of the full query.
注意：我的服务返回一个这样组成的对象：
obj = {elements: INTEGER, data: ARRAY}其中元素告诉您完整查询的长度。
