Angular select box default to existing value

Question

I have an angular user edit page with a select box:

    <select name="clientRole" ng-model="client.role" required>
        <option value="{{client.role}}">{{client.role}}</option>
        <option ng-repeat="role in roleOptions" value="{{role.name}}">{{role.name}}
    </select>

The array "roleOptions" contains all of the possible roles. This page is used to edit a client, and the client will have a role already assigned. When the page comes up, I want the role that is assigned to the client to show as the default value. The way I have it above, the role is duplicated.

Does angular have a way that handles this, or do I need to edit the "roleOptions" array to delete the client role before the page is called?

Use ng-options alongside your select element instead of ng-repeat with the option element. That way your ng-model will implicitly select the default value. — miqh
– miqh, Commented Jul 24, 2014 at 2:26

Chris · Accepted Answer · 2014-07-24 02:33:18Z

1

Try ng-options instead:

<select name="clientRole" 
        ng-model="client.role" 
        ng-options="role.id as role.name for role in roleOptions" 
        required>     
</select>

In this example, I assume that client.role is your role.id

edited Jul 24, 2014 at 2:33

Chris

6,3559 gold badges38 silver badges59 bronze badges

answered Jul 24, 2014 at 2:30

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

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

Collectives™ on Stack Overflow

Angular select box default to existing value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related