Angular.js:从同一个ng模型中获取不同形式的{display.value}}和$scope.value

Angular.js: get different form {{display.value}} and $scope.value from same ng-model

本文关键字：value display scope 同一个 js ng 模型 获取 Angular      更新时间：2023-09-26

示例形式：

<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 &amp; Costa)</option>
    <option display-value='Some verbose message here' value="independent">Independent Coffee Shop</option>
</select>

示例显示元素：

<div>{{ coffee.location }}</div>

问题：如何让我的Angular控制器接收option[value]，同时让{{coffee.location}}显示option[display-value]（或它需要的任何属性）？

我希望我的问题很清楚。提前干杯。

效果如何（由@dfsq提供）

相关javascript:

app.controller('SuggestionController', ['$scope', function($scope) {
    $scope.stringMap = {
        home:   'cosy up at home',
        work:   'lounge at work',
        chain:  'patrol the highstreet'
    };
}]);

相关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]}}
相关文章：