How to select an option in a dropdown list angularjs

Question

I am using AngularJS directive and I need to set a selected option of a dropdown list in my template.

<select id="energySource" ng-options="o.name for o in energyOptions" ng-model="energy" ng-selected="energy" ng-change="energyChange();"></select>

The content of the optionlist depends on resources send by a server when the page is loaded.

var energyChosen = "All";


      angular.element(document).ready(function () {

          $.get('/Dashboard/GetResources', function (data) {

              scope.Resources = data;

              scope.energyOptions = [{ name: scope.Resources.Electricity, id: "Electricity" }, { name: scope.Resources.Gas, id: "Gas" },
               { name: scope.Resources.Water, id: "Water" }, { name: scope.Resources.Solar, id: "Solar" }];

              scope.energy = scope.energyOptions[0];
              energyChosen = scope.energy.id;

              scope.$apply();

          });

It works except that a blank option is preselected which disappears when i select an option I would like to be able to preselect one option. I thought that

scope.energy = scope.energyOptions[0];

would do the trick but it didn't. How can i preselect an option in this case ?

score 0 · Answer 1 · answered Nov 28 '13 at 06:44

0

The way you are doing your ng-options it will store the name of the option in scope.energy not the whole option. You were on the right track when you did:

scope.energy = scope.energyOptions[0];

But it won't work because it expects scope.energy to be the name and not the whole option. What you want to do in your ng-options is something like:

<select id="energySource" ng-options="o as on.name for o in energyOptions" ng-model="energy" ng-selected="energy" ng-change="energyChange();"></select>

The important change is the addition of the o as o.name. The 'o' on the left is what will actually be selected and stored in your scope.energy, while the as o.name is the text that will be displayed on your pull down.

answered Nov 28 '13 at 06:44

Daniel Tabuenca

13,147
3
35
38

Thank you for your answer. The model seems up to date but the change isn't reflected on the page. I never had this problem before, i think i have this problem because i'm in a directive. The changes aren't reflected in the template in this case. Only the droplist is problematic the other models are correctly updated whenever i change them. – user3044142 Nov 29 '13 at 07:32
If i initialize the dropdown with static data i can have a preselection but it seems i can't change with code the visible selected option after. – user3044142 Nov 29 '13 at 07:52
Can you put up a plunkr or jsfiddle that demonstrates the problem you are having? – Daniel Tabuenca Nov 29 '13 at 16:00
Try removing the ng-selected you do not need it if you are using ng-options/ng-model this may be causing your problem – Daniel Tabuenca Nov 29 '13 at 16:35

user2720708 · Answer 2 · 2013-11-28T06:28:22.227

-1

Make sure the scope.energy is outside your initialization.

 $scope.energyOptions = [
    { name: "test1", id: "Electricity" }, 
    { name: "test2", id: "Gas" },
    { name: "test3", id: "Water" }, 
    { name: "test4", id: "Solar" }];
  $scope.energy = $scope.energyOptions[2];

edited Nov 28 '13 at 06:28

answered Nov 28 '13 at 06:09

user2720708

455
2
8
19

How to select an option in a dropdown list angularjs

2 Answers2

Linked