javascript - AngularJS - 选择值返回“？数字：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 来演示： //jsbin.com/EKOpAFI/1/edit

我还尝试在此处使用文档记录极差的 select 元素，但我无法让它以这种方式工作，无论我的 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”。

希望这可以帮助！

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>