Search code examples
javascripthtmlangularjsng-options

Multiple properties for visible ngOption value

I have an object similar to this:

$scope.division = [
  {
    name: "Tom",
    number: 1
  },
  {
    name: "Greg",
    number: 2
  }
];

Now in my HTML I'm using ngOption to display a drop down filled with values from the object.

<select data-ng-model="game.player1" data-ng-options="player.name for player in division">
  <option value="" disabled="true">Player 1</option>
</select>

This displays a drop down of names as expected. However, I want to actually display the name and number in the drop down. So for example if I hard-coded it:

<option>1 - Tom</option>
<option>2 - Greg</option>

I've tried various methods including stuff like this:

data-ng-options="player.number player.name for player in division"

But nothing seems to work.

Solution

  • You should be able to concatenate like so:

    ng-options="(player.number + ' - ' + player.name) for player in division"