Javascript 将 ng-options 值和标签绑定到 ng-model
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29803787/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bind ng-options value and label to ng-model
提问by eirikir
I'm using ng-optionsto generate a select tag whose options are locations. The labels are the location names, and the values are the location ID (in database).
我正在使用ng-options生成一个选择标签，其选项是位置。标签是位置名称，值是位置 ID（在数据库中）。
I've bound the value (location ID) to an ng-modelattribute, but I'd also like to bind the label (location name) to a different ng-modelattribute. (I need to separate the idfield since this will be POSTed to a server that expects this particular attribute.) What's the best way to do this in Angular?
我已将值（位置 ID）绑定到一个ng-model属性，但我还想将标签（位置名称）绑定到不同的ng-model属性。（我需要将id字段分开，因为这将被发布到需要此特定属性的服务器。）在 Angular 中执行此操作的最佳方法是什么？
My code:
我的代码：
<div ng-app="app"><div ng-controller="edit">
<select ng-model="purchase.pickUpLocationId" ng-options="loc.id as loc.name for loc in purchase.availableLocations"></select>
<!-- This is the model not yet bound: -->
<p>You have selected {{ purchase.pickUpLocationName }}</p>
</div></div>
var app = angular.module('app', []);
app.controller('edit', ['$scope', function($scope) {
$scope.purchase = {
pickUpLocationId: 30,
availableLocations: [
{id: 20, name: "Charleston, SC"},
{id: 30, name: "Atlanta, GA"},
{id: 40, name: "Richmond, VA"},
]
};
}]);
回答by scniro
You can change to the following and bind to the entire object. You'll still have access to idlater on for whatever you wish to do with it
您可以更改为以下并绑定到整个对象。您id以后仍然可以访问任何您想用它做的事情
<select ng-model="selected" ng-options="loc as loc.name for loc in purchase.availableLocations"></select>
<p>You have selected {{ selected.name }}</p>
<p>You havd id too! {{ selected.id }}</p>
JSFiddle Link
JSFiddle 链接
回答by Nikhil Baliga
My suggestion is to model as a hash first
我的建议是先建模为散列
{
"20": "Charleston, SC",
"30": "Atlanta, GA"
}
and then use {{availableLocations[purchase.pickUpLocationId]}}
然后使用 {{availableLocations[purchase.pickUpLocationId]}}
and make ng-options as
并将 ng-options 设为
<select ng-model="purchase.pickUpLocationId" ng-options="id as label for (id, label) in purchase.availableLocations"></select>
回答by Surya R Praveen
Updated scniro answer
更新了 scniro 答案
<div ng-app="app">
<div ng-controller="ctrl">
<select ng-model="selected" ng-options="opt as opt.language for opt in tableResult.locales"></select>
<p>You have selected {{ selected.language }}</p>
<p>You havd id too! {{ selected.localeId }}</p>
<p>
</p>
<input type="text" value="{{selected.localeId}} : {{selected.language}}" style="width:50%;"/>
</div>
