javascripthtmlangularjsangularjs-ng-optionsangularjs-select

How to get a string value on select option instead of object:1 etc


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': []

                    }
                };
  }
]);

Solution

  • 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>