How to set a selected option of a dropdown list control using angular JS

Question

I am using Angular JS and I need to set a selected option of a dropdown list control using angular JS. Forgive me if this is ridiculous but I am new with Angular JS

Here is the dropdown list control of my html

 <select ng-required="item.id==8 && item.quantity > 0" name="posterVariants"
   ng-show="item.id==8" ng-model="item.selectedVariant" 
   ng-change="calculateServicesSubTotal(item)"
   ng-options="v.name for v in variants | filter:{type:2}">
  </select>

After it gets populated I get

 <select ng-options="v.name for v in variants | filter:{type:2}" ng-change="calculateServicesSubTotal(item)"
ng-model="item.selectedVariant" ng-show="item.id==8" name="posterVariants"
ng-required="item.id==8 &amp;&amp; item.quantity &gt; 0" class="ng-pristine ng-valid ng-valid-required">
    <option value="?" selected="selected"></option>
    <option value="0">set of 6 traits</option>
    <option value="1">5 complete sets</option>
</select>

How can I set the control for value="0" to be selected?

Steve Klösters · Accepted Answer · 2013-07-31T11:51:00.210

198

I hope I understand your question, but the ng-model directive creates a two-way binding between the selected item in the control and the value of item.selectedVariant. This means that changing item.selectedVariant in JavaScript, or changing the value in the control, updates the other. If item.selectedVariant has a value of 0, that item should get selected.

If variants is an array of objects, item.selectedVariant must be set to one of those objects. I do not know which information you have in your scope, but here's an example:

JS:

$scope.options = [{ name: "a", id: 1 }, { name: "b", id: 2 }];
$scope.selectedOption = $scope.options[1];

HTML:

<select data-ng-options="o.name for o in options" data-ng-model="selectedOption"></select>

This would leave the "b" item to be selected.

edited Jul 31 '13 at 11:51

answered Jul 31 '13 at 11:36

Steve Klösters

9,427
2
42
53

I have a controler file named order.js, thus the html name the same order.html where the control is. Should I set the selectedVariant there or directly on the control? – themhz Jul 31 '13 at 11:40
Usually you would set these things in the controller, on the `$scope` variable. So assuming you're in a single scope, in your controller you could say `$scope.item.selectedVariant = 0`, to set the default selected value. You could also set the variable directly on the control, in HTML, using the [ng-init](http://docs.angularjs.org/api/ng.directive:ngInit) directive, but that gets rather messy in my opinion! – Steve Klösters Jul 31 '13 at 11:43
Could you elaborate on what `variants` is on your scope? You would have to set `item.selectedVariant` exactly to an item of `variants`. – Steve Klösters Jul 31 '13 at 11:47
$scope.item.selectedVariant = 0; this will break up the page if I put it in the controler file – themhz Jul 31 '13 at 11:48
can you provide the syntax using ng-init please? – themhz Jul 31 '13 at 11:48
I updated my answer with a sample where the data is an array of objects, which I believe your situation is. Hope that helps. – Steve Klösters Jul 31 '13 at 11:52
Please see this [plnkr](http://plnkr.co/edit/2COBn7Pl5J9LOyNI6tba?p=preview) for a working example, and try to retrace the steps! – Steve Klösters Jul 31 '13 at 12:19
you may check out my code please http://pastebin.com/HdktBk4T and http://pastebin.com/yEnqEDMc – themhz Jul 31 '13 at 13:30
This is what i have been looking for almost two days of combing Stackoverflow. Thank you @stevuu – David Addoteye Nov 03 '14 at 19:05
Thanks. I have somewhat an extension of this question. If user selects b what should I do to get 2 into my js? – yalkris May 20 '15 at 23:01
@yalkris Use the "as" operator as described in [the docs](https://docs.angularjs.org/api/ng/directive/ngOptions)! It allows you to change what is the value for a given element, for example `o.id as o.name for o in options` (or `o.name as o.id for o in options`, depending on what you meant). – Steve Klösters May 21 '15 at 10:46
How to do the same if the drop down is a multi select one? – Nikhil Sahu Aug 24 '16 at 18:33
what to do if my data-ng-model="formA.selectedOption"? – Akhilesh Kumar Oct 07 '16 at 08:24

score 36 · Answer 2 · edited Nov 13 '17 at 14:10

36

I don't know if this will help anyone or not but as I was facing the same issue I thought of sharing how I got the solution.

You can use track by attribute in your ng-options.

Assume that you have:

variants:[{'id':0, name:'set of 6 traits'}, {'id':1, name:'5 complete sets'}]

You can mention your ng-options as:

ng-options="v.name for v in variants track by v.id"

Hope this helps someone in future.

edited Nov 13 '17 at 14:10

akmozo

9,829
3
28
44

answered May 09 '16 at 17:25

jsmtslch

708
7
19

Yes! finally! Thank you – davaus Feb 15 '17 at 22:41
Great. I was missing the track by in order to dynamically do this. – John Jun 16 '17 at 09:19
Finally! My problem solved by putting track by. Thank you – Kishan Nov 28 '18 at 12:31
This is what I was missing! I was setting the scope field that was bound to `ngModel` properly, but it didn't work until I added the `track by`! Thank you! – Cindy K. Mar 26 '19 at 04:09

score 7 · Answer 3 · answered Jul 31 '13 at 11:38

7

If you assign value 0 to item.selectedVariant it should be selected automatically. Check out sample on http://docs.angularjs.org/api/ng.directive:select which selects red color by default by simply assigning $scope.color='red'.

answered Jul 31 '13 at 11:38

T W

6,267
2
26
33

where do I set the item.selectedVariant? if I define $scope.item.selectedVariant = 0; in the controler of the file, angular breaks up – themhz Jul 31 '13 at 11:47
3

could you also paste matching html? – T W Jul 31 '13 at 13:09
I think each item in orderGrid needs to have selectedVariant set to 0 – T W Jul 31 '13 at 13:20
can you provide a sample code? I am not familiar with angular sorry – themhz Jul 31 '13 at 13:28

Arthur Tsidkilov · Answer 4 · 2016-06-09T15:09:17.183

7

i see here already wrote good answers, but sometime to write the same in other form can be helpful

<div ng-app ng-controller="MyCtrl">
  <select ng-model="referral.organization" ng-options="c for c in organizations"></select>
</div>

<script type='text/javascript'>
  function MyCtrl($scope) {
    $scope.organizations = ['a', 'b', 'c', 'd', 'e'];
    $scope.referral = {
      organization: $scope.organizations[2]
    };
  }
</script>

edited Jun 09 '16 at 15:09

answered Oct 11 '15 at 09:45

Arthur Tsidkilov

5,401
2
21
18

What if I had a drop down that was multi select . Simply setting the ids in the model is not working – Nikhil Sahu Aug 24 '16 at 18:32

shreedhar bhat · Answer 5 · 2017-05-24T06:52:14.090

Simple way

If you have a Users as response or a Array/JSON you defined, First You need to set the selected value in controller, then you put the same model name in html. This example i wrote to explain in easiest way.
Simple example
Inside Controller:

$scope.Users = ["Suresh","Mahesh","Ramesh"]; 
$scope.selectedUser = $scope.Users[0];

Your HTML

<select data-ng-options="usr for usr in Users" data-ng-model="selectedUser">
</select>

complex example
Inside Controller:

$scope.JSON = {
       "ResponseObject":
           [{
               "Name": "Suresh",
               "userID": 1
           },
           {
               "Name": "Mahesh",
               "userID": 2
           }]
   };
   $scope.selectedUser = $scope.JSON.ResponseObject[0];

Your HTML

<select data-ng-options="usr.Name for usr in JSON.ResponseObject" data-ng-model="selectedUser"></select>
<h3>You selected: {{selectedUser.Name}}</h3>

score 1 · Answer 6 · edited Apr 11 '19 at 23:57

It can be usefull. Bindings dose not always work.

<select id="product" class="form-control" name="product" required
        ng-model="issue.productId"
        ng-change="getProductVersions()"
        ng-options="p.id as p.shortName for p in products">
</select>

For example. You fill options list source model from rest-service. Selected value was known befor filling list and was set. After executing rest-request with $http list option be done. But selected option is not set. By unknown reasons AngularJS in shadow $digest executing not bind selected as it shuold be. I gotta use JQuery to set selected. It`s important! Angular in shadow add prefix to value of attr "value" for generated by ng-repeat optinos. For int it is "number:".

$scope.issue.productId = productId;
function activate() {
   $http.get('/product/list')
     .then(function (response) {
       $scope.products = response.data;

       if (productId) {
           console.log("" + $("#product option").length);//for clarity                       
           $timeout(function () {
               console.log("" + $("#product option").length);//for clarity
               $('#product').val('number:'+productId);
               //$scope.issue.productId = productId;//not work at all
           }, 200);
       }
   });
}

Asha Joshi · Answer 7 · 2018-01-12T15:20:59.217

0

Try the following:

JS file

this.options = { 
        languages: [{language: 'English', lg:'en'}, {language:'German', lg:'de'}]
};
console.log(signinDetails.language);

HTML file

<div class="form-group col-sm-6">
    <label>Preferred language</label>
    <select class="form-control" name="right" ng-model="signinDetails.language" ng-init="signinDetails.language = options.languages[0]" ng-options="l as l.language for l in options.languages"><option></option>
    </select>
</div>

edited Jan 12 '18 at 15:20

answered Jan 12 '18 at 14:53

Asha Joshi

87
8

There is already a good solution, that works and has been accepted by OP that it solves his issue. – L. Guthardt Jan 12 '18 at 15:16

score 0 · Answer 8 · edited Jun 05 '19 at 04:54

This is the code what I used for the set selected value

countryList: any = [{ "value": "AF", "group": "A", "text": "Afghanistan"}, { "value": "AL", "group": "A", "text": "Albania"}, { "value": "DZ", "group": "A", "text": "Algeria"}, { "value": "AD", "group": "A", "text": "Andorra"}, { "value": "AO", "group": "A", "text": "Angola"}, { "value": "AR", "group": "A", "text": "Argentina"}, { "value": "AM", "group": "A", "text": "Armenia"}, { "value": "AW", "group": "A", "text": "Aruba"}, { "value": "AU", "group": "A", "text": "Australia"}, { "value": "AT", "group": "A", "text": "Austria"}, { "value": "AZ", "group": "A", "text": "Azerbaijan"}];
 
 
 for (var j = 0; j < countryList.length; j++) {
      //debugger
      if (countryList[j].text == "Australia") {
          console.log(countryList[j].text); 
          countryList[j].isSelected = 'selected';
      }
      }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<label>Country</label>
<select class="custom-select col-12" id="Country" name="Country"   >
<option value="0" selected>Choose...</option>
<option *ngFor="let country of countryList" value="{{country.text}}" selected="{{country.isSelected}}"   > {{country.text}}</option>
</select>

try this on an angular framework

score 0 · Answer 9 · edited Sep 24 '19 at 16:38

0

JS:

$scope.options = [
  {
    name: "a", 
    id: 1 
  },
  {
    name: "b",
    id: 2 
  }
];
$scope.selectedOption = $scope.options[1];

edited Sep 24 '19 at 16:38

Hawz

4,027
1
10
11

answered Aug 01 '19 at 10:44

Snehal S

34
4

How to set a selected option of a dropdown list control using angular JS

9 Answers9

Simple way

Linked

Related