javascript - Ionic pomakni se do određenog stavka popisa


Postoji li način da se skrola do određenog stavka u ion-listi?

Na primjer, u ovom codepen-u: https://codepen.io/anon/pen/grEBQJ

Kad idem na gumb za testiranje, želim se pomicati do stavke popisa s tekstom „Text”.

<button ng-click="goTo()">Go to test</button>

<ion-list class="item">Test</ion-list>

Nisam pronašao nijedan primjer pa je goTo samo prazno:

$scope.goTo = function(){

}

Odgovor #1

Morate postaviti ID na element liste kao:

<ion-item id="item{{item.id}}" ng-repeat="item in items">
      Item {{ item.id }}
</ion-item>

A zatim, metoda $scope.goTo() mora promijeniti hash lokacije i pozvati metodu anchorScroll() iz servisa $ionicScrollDelegate:

$scope.goTo = function(id){
     $location.hash('item'+id);
     $ionicScrollDelegate.anchorScroll();
}

Pogledajte dokumentaciju $ionicScrollDelegate za više informacija.

Ažurirajte sa svojim Codepenom: https://codepen.io/anon/pen/RadXqL

Odgovor #2

Ovu funkcionalnost sam implementirao s JavaScriptom. Nakon što sam svaki ion-item ugnjezdio u div element, proslijedio sam id div elementa u dolje navedenu JS funkciju.

scrollTo(element:string) {

      document.getElementById(element).scrollIntoView();

  }