带有 $http 请求的材料角度无限滚动 [英] Material angular infinite scroll with $http request
本文介绍了带有 $http 请求的材料角度无限滚动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 Angular Material 的 md-virtual-repeat 指令来实现无限滚动，我需要将其替换为 demo 带有 $http 请求的 $timeout 函数.但我无法找到正确的解决方案.在下面的代码中，无限滚动工作正常，但不显示来自 http 请求的数据.问题是我不知道将 $http 结果绑定到 infiniteItems 的方式.
这里是plunker.
Index.html
<div ng-controller="AppCtrl as ctrl" ng-cloak><md-content layout="column"><md-virtual-repeat-container id="vertical-container" flex><div md-virtual-repeat="ctrl.infiniteItems 中的项目" md-on-demandclass="repeated-item" flex>{{item.id}}</md-virtual-repeat-container></md-content>
JS:
(函数(){'使用严格';有角的.module('infiniteScrolling', ['ngMaterial']).controller('AppCtrl', function ($timeout,$scope,$http) {this.infiniteItems = {numLoaded_: 0,toLoad_: 0,项目:[]，getItemAtIndex:函数(索引){如果(索引> this.numLoaded_){this.fetchMoreItems_(index);返回空；}回报指数；},获取长度:函数(){返回 this.numLoaded_ + 5;},fetchMoreItems_:函数(索引){如果(this.toLoad_ <索引){this.toLoad_ += 20;$http.get('items.json').success(function (data) {var 项目 = 数据；for (var i = 0; i < items.length; i++) {this.items.push(items[i].data);}this.numLoaded_ = this.toLoad_;}.bind(this));}}};});})(); 解决方案
这个有效:
- getItemAtIndex 返回索引而不是项目
- 如果你检查你推送的内容，你会看到在我的 plunkr 的第 33 行，我连接了
obj.data，而不是普通的obj
(函数(){'使用严格';angular.module('infiniteScrolling', ['ngMaterial']).controller('AppCtrl', function ($scope, $http) {//在这个例子中，我们使用一个普通对象来设置我们的模型.//使用类也可以.重要的是我们实施//getItemAtIndex 和 getLength.var vm = 这个；vm.infiniteItems = {numLoaded_: 0,toLoad_: 0,项目: []，//必需的.getItemAtIndex:函数(索引){如果(索引> this.numLoaded_){this.fetchMoreItems_(index);返回空；}返回 this.items[index];},//必需的.获取长度:函数(){返回 this.numLoaded_ + 5;},fetchMoreItems_:函数(索引){如果(this.toLoad_ <索引){this.toLoad_ += 5;$http.get('items.json').then(angular.bind(this, function (obj) {this.items = this.items.concat(obj.data);this.numLoaded_ = this.toLoad_;}));}}}})})();I'm using md-virtual-repeat directive of Angular Material to 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.
Here is the plunker.
Index.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:
(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));
}
}
};
});
})();
解决方案
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
(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_;
}));
}
}
}
})
})();
这篇关于带有 $http 请求的材料角度无限滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
