Set Selectedvalue in dropdown in AngularJS

Question

I am using AngularJS. I am trying to bind a dropdown with value shown from response. But I am not able to set the selected data. It always shows the default. Below is the index.cshtml:

<div class="col-sm-4">
   <select name="CopyseasonTypeSelect" ng-model="CopyselectedSeasonType" ng-options="CopySeason.SeasonTypeName for CopySeason in seasons">
        <option value="">-- Select the Season --</option>
   </select>
</div>

In controller.js

testAPIService.getSeasonById(nId).success(function(response) {
    $scope.seasonByIdReponse = response;
    $scope.CopyselectedSeasonType = response.SeasonType;  // I am getting "Summer"
            $scope.init();        
    });
}

The dropdown has the values "-- Select the Season -- ", "Winter", "Summer", "Spring"

The object array is as below:

[object Object],[object Object],[object Object],[object Object]
   [
      0: {
         [functions]: ,
         $$hashKey: "object:78",
         __proto__: { },
         Id: 1,
         ImageUrl: "testicon.png",
         SeasonDetail: null,
         SeasonTypeName: "Winter"
      },
      1: { },
      2: { },
      3: { },
      length: 4
   ]

How to set the value in the dropdown from the service?

What is the seasons Array structure?

MeTe-30
– MeTe-30

2017-01-31 07:32:14 +00:00
Commented Jan 31, 2017 at 7:32 — MeTe-30
– MeTe-30, Commented Jan 31, 2017 at 7:32

MeTe-30 · Accepted Answer · 2017-01-31 14:40:57Z

1

<select name="CopyseasonTypeSelect" 
        ng-model="CopyselectedSeasonType" 
        ng-options="i.SeasonTypeName as i.SeasonTypeName for i in seasons">
    <option value="" style="display: none">-- Select the Season --</option>
</select>

edited Jan 31, 2017 at 14:40

answered Jan 31, 2017 at 7:40

MeTe-30

2,5422 gold badges23 silver badges31 bronze badges

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

6 Comments

venkat14 Over a year ago

Hi @MeTe-30 , I have update the object structure in the initial code block. I tried your code fix, but that did not work.

MeTe-30 Over a year ago

Hi @venkat14 , what is response.SeasonType exactly? "Summer" or {Id: 2, SeasonTypeName : "Summer"}

venkat14 Over a year ago

response.seasontype is the data returned from the service. I want to set the response.SeasonType as the selected data,

MeTe-30 Over a year ago

@venkat14 I want to know the exact value of response.seasontype

venkat14 Over a year ago

the value is "Summer"

|

Nitheesh · Accepted Answer · 2017-01-31 08:26:59Z

1

Try this. Use track by in the ng-options to initialize it

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">

    <div class="container">
        <select name="CopyseasonTypeSelect" ng-model="CopyselectedSeasonType" ng-options="CopySeason.SeasonTypeName for CopySeason in seasons track by CopySeason.Id">
            <option value="">-- Select the Season --</option>
        </select>
    </div>
    <script>
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function ($scope) {
            $scope.seasons = [{
                    SeasonTypeName: "Winter",
                    Id: 0
                },
                {
                    SeasonTypeName: "Summer",
                    Id: 1
                }, 
                {
                    SeasonTypeName: "Spring",
                    Id: 2
            }];
            
            $scope.CopyselectedSeasonType = $scope.seasons[1];
        });
    </script>

</body>

</html>

answered Jan 31, 2017 at 8:26

Nitheesh

20.1k3 gold badges28 silver badges52 bronze badges

1 Comment

venkat14 Over a year ago

Hi @Nitheesh. I tried that, but that did not work. I have updated my code to show how the object array is shown

Collectives™ on Stack Overflow

Set Selectedvalue in dropdown in AngularJS

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related