CODEWITHSUNDEEP
javascriptangularjsdrop-down-menu
Dennis
Dennis

Reputation: 693

AngularJS Select with ng-options binding to object not property

I am trying to bind a select list to ng-model state abbreviation value.. for instance "AK" for Alaska. The initial selection doesn't work apparently because the ng-model is set to a string instead of an object. I've looked all over and there are all other people that have this issue but I haven't found a solution that works.

my controller has the following code

  $scope.states =
            [
            {
                "name": "Alabama",
                "abbreviation": "AL"
            },
            {
                "name": "Alaska",
                "abbreviation": "AK"
            },
            {
                "name": "Arizona",
                "abbreviation": "AZ"
            }];

  //I want the model to be the abbreviation string
  $scope.state = "AK";

Here is the markup

<select class="form-control m-b" data-placeholder="Select Location" 
required=""  ng-model="state" 
ng-options="state as state.name for state in states track by state.abbreviation">
                            </select>

    <p>Selected State {{state}}!</p>

Here is a plnkr that shows shat I'm talking about

https://plnkr.co/edit/IzDY4GrOxJSaMV2MMP30

Upvotes: 2

Views: 533

Answers (1)

blthiewes
blthiewes

Reputation: 66

You can use

$scope.state.abbreviation

to get the abrevation of the state object that's selected.

plkr solution

OR

you could change the ng-options to

ng-options="state.abbreviation as state.name for state in states track by state.abbreviation"

Upvotes: 2

Related Questions