Angular JS Options Dropdown

Question

I was wondering with AngularJS ng-options - is it possible to use 2 different variables for the name in the dropdown?

take this simplified example - I would like the dropdown to contain Country - City in the dropdown. I know this is simplistic but is this possible to do with combining the variables outside of the select dropdown?

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>

<body ng-app="myapp">
<div ng-controller="HelloController" >

<select ng-model="blah" ng-options="city.Id as city.CityName for city in cities"></select>
</div>
<script>
angular.module("myapp", [])
    .controller("HelloController", function($scope) {
        $scope.cities = [
   {Id: '000001', Country:'USA', CityName: 'Chicago'},
   {Id: '000002', Country:'Ireland', CityName: 'Dublin'},
   {Id: '000003', Country:'Spain', CityName: 'Barcelona'},
   {Id: '000004', Country:'USA', CityName: 'Boston'},
];

    } );
</script>
</body>
</html>

John · Accepted Answer · 2015-05-08 19:57:34Z

2

You should be able to accomplish that like so:

ng-options="city.Id as (city.Country + ' - '  + city.CityName) for city in cities"

answered May 8, 2015 at 19:57

John

17.6k17 gold badges69 silver badges87 bronze badges

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

1 Comment

Damien Over a year ago

thats was it - sorry for the noob question. Thanks John

Collectives™ on Stack Overflow

Angular JS Options Dropdown

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related