AngularJS ng-option get index

javascript angularjs ng-options angularjs-ng-options
Kiwi picture Kiwi · Mar 4, 2015 · Viewed 10k times · Source

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?

Answer

dfsq picture dfsq · Mar 4, 2015

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.

Related questions

Bind enum values to ng-options angular js

The response JSON from a http GET method is as shown below [ { "1": "Open" }, { "2": "Expired" } ] How to bind this data in a select drop down box in angular js. I tried with this option: <select class="form-control" ng-model="selected" ng-options="…

Read More
AngularJS: ng-model switching int to string

I'm currently working on an app in Angular. So far, everything has been going -quite- well. I'm really, really new to angular and am amazed that it took so long for the first real roadblock. Situation: I have an array …

Read More
Working with select using AngularJS's ng-options

I have read about it in other posts, but I couldn't figure it out. I have an array, $scope.items = [ {ID: '000001', Title: 'Chicago'}, {ID: '000002', Title: 'New York'}, {ID: '000003', Title: 'Washington'}, ]; I want to render …

Read More