Use $scope variable as array index

Question

I have an array or 'players', and each player has a name, a score and other properties.

I have the following in my partial:

<select ng-model="personToAsk">
    <option value=''>Select who you want to ask</option>
    <option ng-repeat="p in players" value="{{$index}}">{{p.name}} ({{p.score}} points)</option>
</select>
<p>Selected player: {{selectedPerson.name}}

And in my controller:

$scope.selectedPerson = $scope.players[$scope.personToAsk];

But {{selectedPerson.name}} is not outputting anything.

If I hardcode the index in my players array ($scope.selectedPerson = $scope.players[0];), it does output the person, but how do I get to be dynamic, so when a player is selected in the dropdown, it shows the name only further down.

If I put {{personToAsk}} in my template, it does output a number.

1) It rather should be $scope.selectedPerson = $scope.personToAsk. 2) Are you sure that you do this assignment in the right place (in response to the event) ? — Michal Wilkowski
– Michal Wilkowski, Commented Dec 10, 2014 at 17:09
1)$scope.personToAsk is the $index of the selected option, so I was trying to use that number to retrieve it form the players array. 2) I was hoping that the dynamic binding would take care of things, but I'm new to AngularJS, so I obviously misunderstood how that worked. — coopersita
– coopersita, Commented Dec 10, 2014 at 20:18

Mohan Narang · Accepted Answer · 2014-12-10 17:48:15Z

3

The statement:

$scope.selectedPerson = $scope.players[$scope.personToAsk];

Executes once at the time of initialization. And at that time there is no value in $scope.personToAsk.

So, this statement needs to be executes when ever the value in select dropdown changes. So you can either create a watch on "personToAsk" or have a ng-change on select. And execute this statement there. Should work :)

Watch example:

$scope.$watch('personToAsk'), function() {
    $scope.selectedPerson = $scope.players[$scope.personToAsk] ;
}

ng-change example:

<select ng-model="personToAsk" ng-change="selectPerson()"> <option value=''>Select who you want to ask</option> <option ng-repeat="p in players" value="{{$index}}"> {{p.name}} ({{p.score}} points) </option> </select>

In Controller:

$scope.selectPerson = fucntion() {
    $scope.selectedPerson = $scope.players[$scope.personToAsk];
}

Both should work :)

I would personally prefer using ng-options directive to render the options.

edited Dec 10, 2014 at 17:48

answered Dec 10, 2014 at 17:42

Mohan Narang

735 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

coopersita Over a year ago

I also wanted to use ng-option, just that I couldn't figure out how to get the output in the options as I wanted: "John (score: 10)".

Josef Joe Samanek · Accepted Answer · 2014-12-10 17:28:41Z

2

It all seems kind of messed up. I dont know what variable 'index' is for example etc.

You should use ngOptions to generate the options of the select.

Suppose you have this in your controller:

$scope.personToAsk = {};    
$scope.players = [
    { id: 1, name: 'John', score: 10},
    { id: 2, name: 'George', score: 15},
    { id: 3, name: 'James', score: 4}
];

Then in your view, just write this:

<select ng-model="personToAsk" 
    ng-options="p as (p.name + ' ' + p.score) for p in players">
</select>
<p>Selected player: {{personToAsk.name}}</p>

jsfiddle example: http://jsfiddle.net/JoeSham/HB7LU/9008/

edited Dec 10, 2014 at 17:28

answered Dec 10, 2014 at 17:23

Josef Joe Samanek

1,70412 silver badges17 bronze badges

2 Comments

coopersita Over a year ago

The problem is that I want each option to show the name, and score: "John (score: 10)". In your solution, the options only show the name. Is there a way with ng-option to specify the format?

Josef Joe Samanek Over a year ago

In my solution, it also shows the score. This is the part that specifies what is shown in the options: (p.name + ' ' + p.score). You can modify it as you need, so for the format you need, just change it to: (p.name + ' (score: ' + p.score + ')')

Collectives™ on Stack Overflow

Use $scope variable as array index

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related