Sumama Waheed Sumama Waheed - 6 months ago 10
HTML Question

Angular select tag easiest way to display different text in options than what's bound to ng-model

I have a select like this:

<label class="item item-input item-select">
<span class = "input-label"> Security: </span>
<select name="scopeEnumId" ng-model="task.scopeEnumId">
<option>General</option>
<option>Very Restricted</option>
<option>Staff-Only Access</option>
</select>
</label>


Now this makes the task object to look something like this when chosen:

{
scopeEnumId:'Very Restricted'
}


Can I have it that the user sees: General , Very Restricted, Staff-Only Access
but the object looks like this:


{
scopeEnumId:'enum_restricted'
}


or

{
scopeEnumId:'enum_staff'
}


Something like

<option>enum_restricted as Very Restricted</option>


I know I can do it in javascript but I want to know if there is something built in Angular. I didn't find anything, but that doesn't mean anything :)

Example: http://jsfiddle.net/emn28gfk/

Answer

You can use the 'value' attribute on your option tags to set the desired value of scopeEnumId.

Example:

<option value="veryRestricted">Very Restricted  </option>

would map to:

{scopeEnumId : 'veryRestricted'}
Comments