Is it possible to concatenate values in Angular ng-options

Question

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>

Augustine

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. – Shakiashaking

Another option would be to create a property called full_name with the concatenated value before binding the data. – Shakiashaking

okay the problem was the double quotes, needed single. – Augustine

Answer 1

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>

Spleen

I added this answer to remove the question from the list of unanswered AngularJS questions. – Spleen

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. – Electrum

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. – Spleen

Instead of this use like (b.first_name +' '+ b.last_name). This will work. – Bronze

for me, 'b.id as (b.first_name + b.last_name) for b in buyers' has perfectly worked. – Wineskin

Answer 2

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.}

Polychaete

Answer 3

try this instead

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

Op