javascript - AngularJS - 选择值从范围变量返回 "? number:x ?"

Question

尝试获取选择元素的初始值而不是填充值，它添加了一个奇怪的字符串，如下图所示:

这是 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
        };
  }

这是 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>

这里有一个jsbin来演示:http://jsbin.com/EKOpAFI/1/edit

我也尝试过使用记录非常糟糕的选择元素 here但是在我的 teamId 是值而 teamName 是标签的情况下，我无法让它以这种方式工作。它总是想把数组的索引作为值。

如有任何帮助，我们将不胜感激。

Answer 1

select 指令真的有点难以理解。以下是它如何与 ng-options 指令结合使用(非常强大!)

<select 
  ng-model="filters.teamIdSelected"
  ng-options="value.teamId as value.teamName for (key, value) in teams"
  ></select>

在使用开发工具检查选择选项时，不要混淆 DOM 中生成的值。 value 属性始终获取其索引。相应的键值对仍然根据范围进行评估，因此您只需要更新 ´ng-model`。

希望这对您有所帮助!