AngularJS ng-option get index

Question

I'm making a playlist option in the project I'm working on and I'm trying to get a dropdown for all the videos in the list.

which is easy

<select ng-options="vid.Id for vid in playList.Videos track by video.Id" ng-model="selected" class="browser-default"></select>

but this shows a drop down of the Id's, but now I want it to show the position in the list +1;

So when playing video 5/15 the drop down should show 1 to 15 (so not 0 to 14) and 5 should be selected.

any idea on how to accomplish this?

Solution

If you want to display index of the current video as option text, then this ngOptions expression should do the trick:

ng-options="vid as playList.Videos.indexOf(vid)+1 for vid in playList.Videos track by video.Id"

The key here is that you can use indexOf method on Videos array to calculate current video index, and then add 1.

Comments

[Kiwi]

you wouldn't by chance know how to preselect the right video? if I add the ng-model with the right video object, it always selects the last one (although the ng-model has the same object as one of the list)

[Kiwi]

Helpfull, but the other is preciser, but slower (although there both fast)

[dfsq]

ngOptions doesn't support $index, this is not the same as ngRepeat.

[dfsq]

How do you set model? Can you share some code maybe here: plnkr.co/edit/0RNYkctZCu9n4PpekFVf?p=preview

[Kiwi]

Hmm, apparently i did something wrong somewhere, the code in the plnkr fixed my issue :)