CODEWITHSUNDEEP
javascriptangularjs
Ian Vink
Ian Vink

Reputation: 68810

Setting Selected value in a Angular Select

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?

Upvotes: 0

Views: 44

Answers (2)

Phil
Phil

Reputation: 165058

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];

Upvotes: 2

Suneet Bansal
Suneet Bansal

Reputation: 2702

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>

Upvotes: 0

Related Questions