Setting Selected value in a Angular Select

Question

Angularjs 1.5.5

I have a simple Select which works fine:

    <select ng-model="selectedPart">
        <option ng-repeat="optionPart in parts"  value="{{optionPart.Id}}">{{optionPart.Title}}</option>
    </select>

When I set the id as a string, the Select renders that correctly:

 $scope.selectedPart = "1";

When I set it to an Int from an object, no change is made.

 $scope.selectedPart = $scope.parts[0].Id;

Why does the Int not update the Select but the string does, and how would I get it to work?

Phil · Accepted Answer · 2016-05-24 05:40:27Z

2

Try it like this instead

<select ng-model="selectedPartId"
    ng-options="part.Id as part.Title for part in parts">
</select>

Note that I've changed the model to reflect that you're selecting an id and not a parts entry.

If you did want to bind an object, try this

<select ng-model="selectedPart"
    ng-options="part.Title for part in parts track by part.Id">
</select>

You could then assign it via $scope.selectedPart = $scope.parts[0];

edited May 24, 2016 at 5:40

answered May 24, 2016 at 3:27

Phil

166k25 gold badges265 silver badges269 bronze badges

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

Comments

Suneet Bansal · Accepted Answer · 2016-05-24 05:36:59Z

There are two ways in which you can do it:

1. $scope.parts = [{
                        id: 2,
                        Title: 'XX'
                    }, {
                        id: 5,
                        Title: 'XXXX'
                    }, {
                        id: 8,
                        Title: 'XXVVV'
                    }];

                    $scope.selectedPart = $scope.parts[1];

                    <select ng-options="part as part.Title for part in parts track by part.id" ng-model="selectedPart"></select>

2. $scope.parts = [{
                        id: 2,
                        Title: 'XX'
                    }, {
                        id: 5,
                        Title: 'XXXX'
                    }, {
                        id: 8,
                        Title: 'XXVVV'
                    }];

                    $scope.selectedPart = $scope.parts[1].id;

                    <select ng-options="part.id as part.Title for part in parts" ng-model="selectedPart"></select>

Collectives™ on Stack Overflow

Setting Selected value in a Angular Select

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related