Example form:
<select ng-model="coffee.location">
<option display-value='Some verbose message here' value="home">At home</option>
<option display-value='Some verbose message here' value="work">At work</option>
<option display-value='Some verbose message here' value="chain">Coffee Shop Chain (i.e. Starbucks & Costa)</option>
<option display-value='Some verbose message here' value="independent">Independent Coffee Shop</option>
</select>
Example display element:
<div>{{ coffee.location }}</div>
Question:
How can I get my Angular controller to receive option[value]
, whilst having {{coffee.location}}
display option[display-value]
(or whatever attribute it need to be)?
I hope my question is clear. Cheers in advance.
Relevant javascript:
app.controller('SuggestionController', ['$scope', function($scope) {
$scope.stringMap = {
home: 'cosy up at home',
work: 'lounge at work',
chain: 'patrol the highstreet'
};
}]);
Relevant HTML:
<div id="some_parent" ng-app ng-controller="SuggestionController">
...
<select ng-model="coffee.location">
<option value="home">At home</option>
<option value="work">At work</option>
<option value="chain">Coffee Shop Chain</option>
<option value="independent">Independent</option>
</select>
...
</div>
{{stringMap[coffee.location]}}