set selected value of drop down list in angularjs

Question

HTML code

<div>
            <label for="name">School Name</label>
            <select ng-model="SelectedSchoolIDEdit"
                    ng-options="option.Name for option in SchoolAvailableOptions track by option.ID"></select>
        </div>

Angular code

 SchoolGradesService.GetAllSchools().then(function (d) {
    $scope.SchoolAvailableOptions = d.data;// Success
    $scope.SelectedSchoolIDEdit = $scope.SchoolAvailableOptions[0].ID;
}, function () {
    alert('Error Occured !!!'); // Failed
});

The situation like that i get data successfully and i can fill the drop down list but The problem is that I cant set the default value on it And I search a lot and i see the same what I do ,SO I cannot catch the problem Note: I am new with Angular

did you take a look at https://stackoverflow.com/questions/17968760/how-to-set-a-selected-option-of-a-dropdown-list-control-using-angular-js ? — Andrew Lohr, Sep 29 '17 at 13:31

Prerak Sola · Answer 1 · 2017-09-29T13:55:46.463

1

Replace $scope.SelectedSchoolIDEdit = $scope.SchoolAvailableOptions[0].ID;
by $scope.SelectedSchoolIDEdit = $scope.SchoolAvailableOptions[0];

Check the documentation

Here's a JSFiddle

edited Sep 29 '17 at 13:55

answered Sep 29 '17 at 13:31

Prerak Sola

9,517
7
36
67

@Radwa See the updated answer. I have added an example. – Prerak Sola Sep 29 '17 at 13:56

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

try this

<select ng-init="SelectedSchoolIDEdit=SchoolAvailableOptions[0].ID" ng-model="SelectedSchoolIDEdit"
                ng-options="option.ID as option.Name for option in SchoolAvailableOptions track by option.ID"></select>

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 29 '17 at 13:40

Amrut Patil

53
6

score 0 · Accepted Answer · answered Sep 29 '17 at 13:58

Here is my solution for my problem. I did a data mockup of your data. I was able to select the option, when the scope variable $scope.SelectedSchoolIDEdit will need to have the syntax to be.

$scope.SelectedSchoolIDEdit = {ID: 1};

So to solve your problem, the code that uses the service should be like this.

SchoolGradesService.GetAllSchools().then(function (d) {
    $scope.SchoolAvailableOptions = d.data;// Success
    $scope.SelectedSchoolIDEdit = {ID: $scope.SchoolAvailableOptions[0].ID};
}, function () {
    alert('Error Occured !!!'); // Failed
});

Here is a working example of how the data should be for the options to be selected.

JSFiddle Demo

Can you please check if this change fixes your issue?

It would be better to assign the first element of `SchoolAvailableOptions` array to `SelectedSchoolIDEdit`, instead of creating a hard coded element. — Prerak Sola, Sep 29 '17 at 14:03
@PrerakSola I am stating the problem alone. Plus in your answer too there is a `track by option.ID` that is not even needed, if we use your method I think! — Naren Murali, Sep 29 '17 at 14:07

set selected value of drop down list in angularjs

3 Answers3

try this