CODEWITHSUNDEEP
javascriptangularjsasp.net-mvc
Radwa
Radwa

Reputation: 65

set selected value of drop down list in angularjs

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

Upvotes: 0

Views: 2401

Answers (3)

Naren Murali
Naren Murali

Reputation: 58767

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?

Upvotes: 0

Prerak Sola
Prerak Sola

Reputation: 10019

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

Check the documentation

Here's a JSFiddle

Upvotes: 1

Amrut Patil
Amrut Patil

Reputation: 53

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>

Upvotes: 0

Related Questions