AngularJs bind to select

Question

I'm using angular 1.5.2 and I'm trying to bind ,my select like this:

<label>Role</label>
<div class="form-group">
    <div>
        <select id="role" class="form-control" name="role" >
            <option value="1" ng-model="employeeCtrl.employee.RoleId" name="role" id="intern">Stagiair</option>
            <option value="3" ng-model="employeeCtrl.employee.RoleId" name="role" id="employee">Werknemer</option>
            <option value="4" ng-model="employeeCtrl.employee.RoleId" name="role" id="companyadmin">Bedrijfadmin</option>
        </select>
    </div>
</div>

But it's not working. When a user has role 4 it still shows 1 ?

The ng-model should be on the select tag, and it looks a bit strange. Can you post your controller code and show where you initiate this variable? — henrikmerlander
– henrikmerlander, Commented Mar 28, 2016 at 14:19

Shaishab Roy · Accepted Answer · 2016-03-28 14:14:12Z

2

you should use ng-model="employeeCtrl.employee.RoleId" in select tag instead of option tag

   <select id="role" class="form-control" ng-model="employeeCtrl.employee.RoleId" >
        <option value="1" name="role" id="intern">Stagiair</option>
        <option value="3" name="role" id="employee">Werknemer</option>
        <option value="4" name="role" id="companyadmin">Bedrijfadmin</option>
    </select>

See PLUNKER DEMO

edited Mar 28, 2016 at 14:14

answered Mar 28, 2016 at 13:48

Shaishab Roy

16.9k7 gold badges56 silver badges69 bronze badges

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

Comments

tymeJV · Accepted Answer · 2016-03-28 13:44:31Z

1

Put the ngModel on the select element:

<select id="role" class="form-control" name="role" ng-model="employeeCtrl.employee.RoleId">
    <option value="1" name="role" id="intern">Stagiair</option>
    <option value="3" name="role" id="employee">Werknemer</option>
    <option value="4" name="role" id="companyadmin">Bedrijfadmin</option>
</select>

answered Mar 28, 2016 at 13:44

tymeJV

105k14 gold badges165 silver badges158 bronze badges

1 Comment

Jamie Over a year ago

Then the selected role is nothing. I've checked employeeCtrl.employee.RoleId and that is 4 so I would expect Bedrijfadmin to be selected.

Collectives™ on Stack Overflow

AngularJs bind to select

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related