76

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>
Mistalis
  • 17,793
  • 13
  • 73
  • 97
PatrickCurl
  • 996
  • 1
  • 7
  • 8
  • 5
    I have done this before and it does work. My syntax `s.subsidiary.sid._value_ as s.subsidiary.subsidiary_no._value_ + ' :' + s.subsidiary.subsidiary_name._value_ for s in subsidiaries`. The only difference I can see is that I did not use parentheses. Try removing them and see if it works. – Jonathan Palumbo Nov 20 '13 at 16:59
  • Another option would be to create a property called full_name with the concatenated value before binding the data. – Jonathan Palumbo Nov 20 '13 at 17:02
  • 3
    okay the problem was the double quotes, needed single. – PatrickCurl Nov 20 '13 at 17:13

3 Answers3

140

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>
Cyril Gandon
  • 16,830
  • 14
  • 78
  • 122
boatcoder
  • 17,525
  • 18
  • 114
  • 178
  • I added this answer to remove the question from the list of unanswered AngularJS questions. – boatcoder Jun 07 '14 at 15:30
  • 1
    Just a note about something that tripped me up: The quotes are important. It won't work with double quotes inside double quotes or single quotes inside single quotes. – Qaz Jun 11 '15 at 18:09
  • 1
    Absolutely dbl quotes inside dbl quotes don't work, because they end the current string and start another one. You have to mix up the quotes like above. – boatcoder Jun 12 '15 at 00:51
  • Instead of this use like (b.first_name +' '+ b.last_name). This will work. – Jeeva J Jun 24 '15 at 06:34
  • for me, `'b.id as (b.first_name + b.last_name) for b in buyers'` has perfectly worked. – charliebrownie Jun 02 '17 at 15:50
4

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.

Mistalis
  • 17,793
  • 13
  • 73
  • 97
0

try this instead

<select ng-model="buyers" ng-options="b as (b.first_name + " " + b.last_name) for b in buyers">
</select>
Martin Brisiak
  • 3,872
  • 12
  • 37
  • 51
Dipali Jadhav
  • 1