[英]Need Help to Include infinite-scroll in fancy-select on angularjs + ionic
我在我的應用程序http://jsfiddle.net/q62jx3s6/中使用了此指令,這是ionic的angularjs,我的問題是當我嘗試僅在滾動時嘗試在此指令中使用無限滾動加載更多數據時:
首先,我將顯示我的代碼,然后再解決問題。
我在這里放了fancy-select-items.html:
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" ng-model="search" placeholder="Buscar ...">
</label>
<!-- Multi select -->
<ion-toggle
ng-repeat="item in items | filter:search"
ng-if="multiSelect"
ng-checked="item.checked"
ng-model="item.checked"
class="item item-text-wrap">
{{item.text}}
</ion-toggle>
<!-- Single select -->
<ion-item
ng-repeat="item in items | filter:search"
ng-if="!multiSelect"
class="item item-text-wrap"
ng-click='validateSingle(item)'>
{{item.text}}
</ion-item>
</ion-list>
<ion-infinite-scroll spinner on-infinite="loadMore()" distance="10%">
</ion-infinite-scroll>
</ion-content>
在fancy-select的指令中,我這樣:
scope.loadMore = function() {
$timeout(function() {
scope.items.push({
id: "1",
text: "teste"
});
console.log('inseriu');
$scope.$broadcast('scroll.infiniteScrollReady');
$scope.$broadcast('scroll.infiniteScrollComplete');
$scope.$broadcast('scroll.resize');
}, 500);
}
然后在我的表單模板中輸入:
<fancy-select
header-text="Parcero"
allow-empty='false'
value="formData.parcero"
text="elparcero"
items="parceros"
ng-change="change()"
ng-model="formData.parcero">
</fancy-select>
控制器:
$scope.parceros = [];
var query = "SELECT * FROM cadc001 WHERE cd_empresa =" + sessao.getData("sess_empresa") + " LIMIT 1, 30";
$cordovaSQLite.execute(db, query, []).then(function(res) {
if (res.rows.length > 0) {
for (var i = 0; i < res.rows.length; i++) {
$scope.parceros.push({
id: res.rows.item(i).id,
text: unescape(res.rows.item(i).nome),
checked: false,
icon: null
});
}
}
}, function(err) {
console.error(err);
});
$scope.elparcero = 'Selecione un Parcero';
當我嘗試打開應用程序並單擊選擇時,他打開了模態,然后滾動到底部,他開始添加許多項目而不是停止,而是繼續添加循環。 是錯的,我滾動時只需添加1個項目,每次添加1個項目。
在我的日志中:
....
6 655085 log inseriu
7 655621 log inseriu
8 656220 log inseriu
9 656826 log inseriu
10 657357 log inseriu
11 657897 log inseriu
12 658433 log inseriu
13 658965 log inseriu
14 659505 log inseriu
15 660041 log inseriu
16 660577 log inseriu
17 680685 log inseriu
18 680697 log inseriu
......
必須像這樣工作,每次滾動到底部時一次:
http://codepen.io/elm/pen/Becqp
請幫助我,我的英語不太好,用錯詞對不起我。
嘗試在$apply
移動代碼
$timeout(function() {
$scope.$apply(function(){
scope.items.push({
id: "1",
text: "teste"
});
console.log('inseriu');
$scope.$broadcast('scroll.infiniteScrollReady');
$scope.$broadcast('scroll.infiniteScrollComplete');
$scope.$broadcast('scroll.resize');
});
}, 500);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.