ng-option not being selected from angularjs Select using ng-model?

Question

I have already checked other solution with same problem but nothing worked. I am facing issue in selecting the drop down value as per the ng-model. Below is the code I am using -

<select class="form-control"  name="adminID" 
    ng-model="hospitalsCtrl.hospital.admin_id" 
    ng-disabled="hospitalsCtrl.hospital.ID" 
    ng-options="admin.ID as admin.email  for admin in  hospitalsCtrl.adminsList  track by admin.ID" required>
    <option value="">Please Choose</option>
</select>

Its generating option like below -

The ng-model value is being populated properly , but the element is not selected. Please help.

Fiddle for this https://jsfiddle.net/6xy03urf/4/

TIA.

Maybe you should add some js here, btw is hospitalsCtrl.hospital defined ? — Dan M. CISSOKHO
– Dan M. CISSOKHO, Commented Sep 22, 2016 at 5:27
Added fiddle, had to add js in the HTML part only, jsfiddle.net/6xy03urf/4 — maddie
– maddie, Commented Sep 22, 2016 at 5:28
@DMCISSOKHO , yes its defined in the controller and I am able to print the value of hospitalsCtrl.hospital.admin_id as well in the output. You can check the fiddle also, it showing same behaviour. — maddie
– maddie, Commented Sep 22, 2016 at 5:31
what do you mean by "but the element is not selected" ? it seems to work in your sample — Dan M. CISSOKHO
– Dan M. CISSOKHO, Commented Sep 22, 2016 at 5:32

ngCoder · Accepted Answer · 2016-09-22 07:01:01Z

3

You should remove the track by admin.ID part from ng-options as it is not allowing to bind with ng-model. Try below code in your HTML

<select class="form-control"  name="adminID" 
    ng-model="hospitalsCtrl.admin_id" 
    ng-options="admin.ID as admin.email  for admin in  hospitalsCtrl.adminsList" required>
    <option value="">Please Choose</option>
</select>

In your JS make a little change like below

     var app = angular.module('App',[]);
app.controller('Hospitals-Controller', function(){

    console.log("ASA");
    var self = this;

     //self.admin_id = 2 ;

    self.adminsList = [
                    { "ID" : 1,
                "name" : "test 1",
              "email" : "[email protected]"

            },
            { "ID" : 2,
                "name" : "test 2",
              "email" : "[email protected]"

            },
             { "ID" : 3,
                "name" : "test 3",
              "email" : "[email protected]"

            }];
                        self.admin_id = self.adminsList[1].ID;
})

Here is the explanation from Angular on how to use select as and track by

Because the selected option has been set programmatically in the controller, the track by expression is also applied to the ngModel value.In the example, the ngModel value is adminsList1.ID and the track by expression evaluates to adminsList1.ID.id (which is undefined). As a result, the model value is not matched against any and the appears as having no selected value

answered Sep 22, 2016 at 7:01

ngCoder

2,1051 gold badge15 silver badges23 bronze badges

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

6 Comments

maddie Over a year ago

Thanks for your answer. If I remove the "track by" , it works in the fiddle but its not working in my app, its exactly the same code. If I use ng-repeat with options it works fine, so I am sticking with that instead of ng-options.

ngCoder Over a year ago

No don't use ng-repeat instead of ng-options ! ng-options has lot of flexibility in case of dropdowns more than ng-repeat.Did you set your ng-model object like I did in answer ?

maddie Over a year ago

you mean the last line ? self.admin_id = self.adminsList[1].ID ? this is basically setting the ID value which I have already from the DB, but its not selecting the required value.

ngCoder Over a year ago

Hmm that's hurting :( Okay mate !

maddie Over a year ago

I know right! There are things in angular which are remains unexplained :P :P

|

Dan M. CISSOKHO · Accepted Answer · 2016-09-22 05:50:01Z

0

You should try like this:

var self = this;

self.adminsList = [
                { "ID" : 1,
            "name" : "test 1",
          "email" : "[email protected]"

        },
        { "ID" : 2,
            "name" : "test 2",
          "email" : "[email protected]"

        },
         { "ID" : 3,
            "name" : "test 3",
          "email" : "[email protected]"

        }];

          self.admin_id = self.adminsList[1];

answered Sep 22, 2016 at 5:50

Dan M. CISSOKHO

1,0851 gold badge14 silver badges28 bronze badges

3 Comments

maddie Over a year ago

is there any way to select the option on basis of just Id, not whole object?

Dan M. CISSOKHO Over a year ago

why do you want only the id ? this solution don't fit your needs ?

maddie Over a year ago

As I do not have whole object I just have id for the field.

maddie · Accepted Answer · 2016-09-22 07:41:18Z

0

Both of the answers provided above are valid , but for some reasons its not working for my app. Using ng-repeat for options instead of ng-options is working for me. Posting the code it might help someone with my situation :P . Below is the code which worked for me -

<select class="form-control"  name="adminID" ng-model="hospitalsCtrl.hospital.admin_id" 
ng-disabled="hospitalsCtrl.hospital.ID" required>
    <option value="">Please Choose</option>
    <option ng-repeat="admin in hospitalsCtrl.adminsList" value="{{admin.ID}}">{{admin.email}}</option>
                        </select>

answered Sep 22, 2016 at 7:41

maddie

3911 bronze badges

Collectives™ on Stack Overflow

ng-option not being selected from angularjs Select using ng-model?

3 Answers 3

6 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related