CODEWITHSUNDEEP
javascripthtmlangularjsng-options
CaribouCode
CaribouCode

Reputation: 14428

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.

Upvotes: 2

Views: 69

Answers (3)

PSL
PSL

Reputation: 123739

You could just concatenate it in the expression itself.

<select data-ng-model="game.player1" 
    data-ng-options="(player.number + '-' + player.name) for player in division">

However i would do this on the controller to create that specific view model that needs to be bound, rather than doing it on the view.

angular.module('app', []).controller('ctrl', function($scope){
 
$scope.game ={player1: 1};
  
$scope.division = [
  {
    name: "Tom",
    number: 1
  },
  {
    name: "Greg",
    number: 2
  }
];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <select data-ng-model="game.player1" data-ng-options="player.number as (player.number + '-' + player.name) for player in division">
  <option value="" disabled="true">Player 1</option>
</select>
  {{game.player1}}
  </div>

Upvotes: 2

John Strickler
John Strickler

Reputation: 25421

Try using a formatting function defined in your controller:

$scope.format = function(player) {
  return player.number + ' - ' + player.name;
};

Then mark it up like so:

data-ng-options="format(player) for player in division"

Upvotes: 1

tymeJV
tymeJV

Reputation: 104785

You should be able to concatenate like so:

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

Upvotes: 3

Related Questions