How can I make angular populate value with actual string. I want to get this
<option label="New York City" value="New York City">New York City</option>
Instead of this
<option label="New York City" value="object:3">New York City</option>
My code:
<div ng-controller="CountryCntrl">
<div>
City: <br>
<select id="country" ng-model="states" ng-options="country for (country, states) in countries" required>
<option value=''>Select</option>
</select>
</div>
<br>
<div>
SubArea:<br>
<select id="state" ng-disabled="!states" ng-model="cities" ng-options="state for (state,city) in states" required>
<option value=''>Select</option></select>
</div>
<br>
<div>
SpecLoc:<br>
<select id="city" ng-disabled="!cities || !states" ng-model="city">
<option value=''>Select</option>
<option ng-repeat="city in cities" value='{{city}}'>{{city}}</option></select>
</div>
</div>
And here is the scope array. Please ignore the wrong naming(countries/cities). Its an example
$scope.countries = {
'New York City': {
'manhattan': ['Battery Park','Chelsea','Chinatown / Lit Italy','Downtown','East Harlem','East Village','Financial District','Flatiron','Gramercy','Greenwich Village','Harlem / Morningside','Inwood / Wash Hts','Lower East Side','Midtown','Midtown East','Midtown West','Murray Hill','Nolita / Bowery','SoHo','TriBeCa','Union Square','Upper East Side','Upper West Side','West Village'],
'brooklyn': [],
'queens': [],
'bronx': [],
'staten island': [],
'new jersey': [],
'long island': [],
'westchester': [],
'fairfield co': [],
'fairfield co, CT': []
},
'Chicago': {
'city of chicago': [],
'north chicagoland': [],
'west chicagoland': [],
'south chicagoland': [],
'northwest indiana': [],
'northwest suburbs': []
},
'Washington': {
'district of columbia': [],
'northern virginia': [],
'maryland': []
}
};
}
]);
After I did a lot of reading, I found a solution.
Its pretty simple, if you want your option value to reflect the value and not the object you just add track by
.
<select id="country" ng-model="states" ng-options="country for (country, states) in countries track by country" required>
<option value=''>Select</option>
</select>
And you will get this
<option label="New York City" value="New York City">New York City</option>
Instead of this
<option label="New York City" value="object:3">New York City</option>