AngularJS display multiple values in select menu?

Question

I have a select menu using Angular 1.5.11:

 <select ng-model="abc.user.state" name="state" ng-options="option.code as option.name for option in abc.brStateSelect.options | orderBy: 'name' track by option.code"
    class="form-control" required></select>

which uses json such as

[{ "id": 11, "name": "Rondônia", "code": "RO" }, { "id": 12, "name": "Acre", "code": "AC" }]

And the menu correctly displays the "name" props. However I want to display TWO props: "name" and "code" such as Acre - AC as the menu items.

How can I modify my ng-options to display more than one field as a label?

Sajeetharan · Accepted Answer · 2017-04-13 18:00:44Z

1

You can do this,

<select ng-model="abc.user.state" name="state" ng-options="option.name  as option.name + '-' + option.code  for option in datas | orderBy: 'name' track by option.code"  class="form-control" required></select>

DEMO

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.datas =
  [{ "id": 11, "name": "Rondônia", "code": "RO" }, { "id": 12, "name": "Acre", "code": "AC" }];
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
	<select ng-model="abc.user.state" name="state" ng-options="option.name  as option.name + '-' + option.code  for option in datas | orderBy: 'name' track by option.code"
    class="form-control" required></select>
</body>
</html>

answered Apr 13, 2017 at 18:00

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS display multiple values in select menu?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related