I am trying to setup an infinite repeat for a drop-down selection as the user keep scrolling.
Using $http tried something along these lines. But can't seem to get it working.
$scope.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_ + 25;
},
fetchMoreItems_: function (index) {
if (this.toLoad_ < index) {
this.toLoad_ += 10;
AssemblyJigsFactory.getData().then(angular.bind(this, function (obj) {
this.items = this.items.concat(obj.data.success.data);
this.numLoaded_ = this.toLoad_;
}));
}
}
};
If I console.log( $scope.infiniteItems);
it comes up empty,
Object {numLoaded_: 0, toLoad_: 0, items: Array[0]}
My HTML is a simple dialog pops up with this mark-up
<md-input-container class="md-block" flex-gt-sm>
<label>Storage Location</label>
<md-select ng-model="newJig.storagelocation" placeholder="Storage Location" ng-cloak>
<md-option>
<md-virtual-repeat-container id="vertical-container">
<div md-virtual-repeat="item in infiniteItems" md-on-demand class="repeated-item" flex>
{{item.name}}
</div>
</md-virtual-repeat-container>
</md-option>
<div ng-hide="allItems.length">No items found</div>
</md-select>
</md-input-container>
But storage location
is just not showing any values. I am not sure whether the html setup is right either.
I have tested this
AssemblyJigsFactory.getData().then(function(res){
console.log( res.data.success);
});
on its own and data keeps coming in.
Object {total: 50, per_page: 25, current_page: 1, ...
Any ideas?
I had the same issue, change your md-input-container
as follows.
<md-input-container class="md-block" flex-gt-sm>
<label>Storage Location</label>
<md-select ng-model="newJig.storagelocation" placeholder="Storage Location" ng-cloak>
<md-virtual-repeat-container id="vertical-container">
<div md-virtual-repeat="item in infiniteItems" md-on-demand class="repeated-item" flex>
<md-option ng-value='item.value'>{{item.name}}
</md-option>
</div>
</md-virtual-repeat-container>
<div ng-hide="allItems.length">No items found</div>
</md-select>
</md-input-container>
Hope this can help.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.