Get the index of the clicked item of a list

ionic-v1
1

Hi all,

I a list of items in which every item is formed by a text and a button.

When I press the button I want to change the content of the text.

the list itself is dynamic and can grow or get smaller.

How to achieve this? Is there some “index” attribute on the list? Or any other way to get the correct text to update?

Thanks,
Segolas

2

If you are using ng-repeat you can pass $index into your function, or you can pass $event which will provide you with the object you clicked, you should then be able to find the item from there.

Could you provide a codepen, I’ll be able to modify the example to demonstrate.

3

Hi,

thanks for your reply. I’m completely new to both ionic and angular so maybe it was an easy one but here you go: http://codepen.io/anon/pen/JdvpwN (I’m trying to port an app from native code to ionic)

I looks not so good but also codepen is kinda new for me.

AS you can see I’m using mg-repeat for the moment, because I wanted a fast way to init my UI, but in the future will be more dynamic.

Also I’ve searched for the $event documentantion but couldn’t quite find much info

4

Let’s say in your controller you put an array of tracks in $scope:

$scope.tracks = [ {id: 0, title: 'Song 1'}, {id: 25, title: 'Song 2'} ];

In your view you would iterate this way and call playTrack() with the track object

<ion-list>
  <ion-item ng-repeat="track in tracks">
    <div class='row row-center'>
      <div class='col'>
        <span >test</span>
      </div>
      <div class='col'>
        <button class="button icon ion-ios-play" ng-click='playTrack({{track}})'></button>
      </div>

    </div>

  </ion-item>
</ion-list>

In your controller, define playTrack

$scope.playTrack = function(track) {
  // do something
  console.log('Track', track);
};
1 Like
5

huh?
I thought you should not use {{ }} inside an ng-click because ng-click already is an angular expresion.
should it not be :
… ng-click=‘playTrack(track)’> ?