javascript AngularJS - 选择值返回“？编号：x？” 从范围变量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18795167/
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
AngularJS - Select value returns "? number:x ?" from scope variable
提问by Scotty Bollinger
Trying to get the initial value for a select element and instead of populating the value, it adds a weird string as seen in this image:
尝试获取 select 元素的初始值，而不是填充该值，它添加了一个奇怪的字符串，如下图所示：
Here is the JavaScript code:
这是 JavaScript 代码：
function appCtrl($scope){
$scope.teams = [
{teamId: 10, teamName: 'Foo'},
{teamId: 20, teamName: 'Bar'},
{teamId: 30, teamName: 'Steve'},
{teamId: 40, teamName: 'Jobs'},
{teamId: 50, teamName: 'Macs'}
];
$scope.filters = {
teamIdSelected: 20
};
}
Here is the HTML:
这是 HTML：
<div ng-app ng-controller="appCtrl">
<select class="small" ng-model="filters.teamIdSelected">
<option ng-repeat="team in teams" value="{{team.teamId}}">{{team.teamName}}</option>
</select>
Here is a jsbin to demonstrate: http://jsbin.com/EKOpAFI/1/edit
这里有一个 jsbin 来演示：http://jsbin.com/EKOpAFI/1/edit
I also tried using the incredibly poorly documented select element herebut I can't get it to work that way either where my teamId is the value and the teamName is the label. It always wants to put the index of the array as the value.
我还尝试在此处使用记录非常糟糕的 select 元素，但我无法让它以这种方式工作，其中我的 teamId 是值，而 teamName 是标签。它总是想把数组的索引作为值。
Any help would be greatly appreciated.
任何帮助将不胜感激。
回答by Pascal Precht
selectdirective is really a bit hard to grok. Here's how it works in conjunction with ng-optionsdirective (which is amazingly powerful!)
select指令真的有点难以理解。这是它与ng-options指令结合使用的方式（这是非常强大的！）
<select
ng-model="filters.teamIdSelected"
ng-options="value.teamId as value.teamName for (key, value) in teams"
></select>
Don't get confused with the values generated in the DOM when inspecting the selects options with dev tools. The valueattribute always gets its index. Corresponding key values pairs still get evaluated against scope, so all you need is to update ′ng-model`.
使用开发工具检查选择选项时，不要与 DOM 中生成的值混淆。该value属性始终获取其索引。相应的键值对仍然会根据范围进行评估，因此您需要的只是更新“ng-model”。
Hope this helps!
希望这可以帮助！
回答by kmdsax
I recommend using ng-options on the select element instead, like so:
我建议在 select 元素上使用 ng-options，如下所示：
<select class="small" ng-model="filters.teamIdSelected" ng-options="team.teamId as team.teamName for team in teams"></select>
Additionally, if you want to include a "Select Team" option:
此外，如果您想包含“选择团队”选项：
<select class="small" ng-model="filters.teamIdSelected" ng-options="team.teamId as team.teamName for team in teams">
<option value="">Select Team</options>
</select>
回答by Nikos Paraskevopoulos
This is what you want:
这就是你想要的：
<select class="small" ng-model="filters.teamIdSelected"
ng-options="t.teamId as t.teamName for t in teams">
</select>
Dont use ng-repeatwith <option>s.
不要ng-repeat与<option>s 一起使用。
