簡體   English   中英

需要幫助在angularjs + ionic上的fancy-select中包括無限滾動

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM