AngularJS - 选择值返回“？number：x？”来自范围变量

Question

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

以下是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>

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

希望这有帮助！

Answer 2

我建议在select元素上使用ng-options，如下所示：

    <select class="small" ng-model="filters.teamIdSelected" ng-options="team.teamId as team.teamName for team in teams"></select>

此外，如果您想要包含“选择团队”选项：

<select class="small" ng-model="filters.teamIdSelected" ng-options="team.teamId as team.teamName for team in teams">
  <option value="">Select Team</options>      
</select>

Answer 3

这就是你想要的：

<select class="small" ng-model="filters.teamIdSelected"
    ng-options="t.teamId as t.teamName for t in teams">
</select>

不要将ng-repeat用于<option> s。

Answer 4

我知道这个问题已经在几年前得到解答，但如果有人遇到同样的问题并且解决方案不起作用，请尝试按 $index 跟踪。

<select class="small" ng-model="filters.teamIdSelected"
    ng-options="t.teamId as t.teamName for t in teams track by $index">
</select>