CODEWITHSUNDEEP
angularjsangularjs-ng-options
PatrickCurl
PatrickCurl

Reputation: 996

Is it possible to concatenate values in Angular ng-options

Basically, I'm trying to populate a select box but concatenate values from the first_name column and last_name column.

What I want to do (doesn't work):

<select ng-model="buyers" ng-options="b.id as (b.first_name + " " + b.last_name) for b in buyers"></select>

What does work:

<select ng-model="buyers" ng-options="b.id as b.first_name for b in buyers"></select>

Upvotes: 76

Views: 51845

Answers (3)

Dipali Jadhav
Dipali Jadhav

Reputation: 1

try this instead

<select ng-model="buyers" ng-options="b as (b.first_name + " " + b.last_name) for b in buyers">
</select>

Upvotes: 0

Mistalis
Mistalis

Reputation: 18269

You can concatenate a string using this synthax:

ng-options="i.x + ' ' + i.y for i in items"

The following snippet concatenate firstname and lastname:

angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.names = [{firstname: 'Jon', lastname: 'Snow'},
                  {firstname: 'Rob', lastname: 'Stark'},
                  {firstname: 'Ned', lastname: 'Stark'}];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl">
  <select ng-model="selected" ng-options="n.firstname + ' ' + n.lastname for n in names"></select>
  selected: {{selected}}
</div>

Note that parenthesis are not required, but it may improve readability.

Upvotes: 4

boatcoder
boatcoder

Reputation: 18107

The quotes are important. It won't work with double quotes inside double quotes or single quotes inside single quotes.

What does work: 

<select ng-model="buyers" ng-options='b.id as (b.first_name + " " + b.last_name) for b in buyers'></select>

Upvotes: 140

Related Questions