如何在 select 元素上使用 Angular ng-options？

Question

官方文档说我们可以在任何元素上使用 ng-options，而不仅仅是 select。我想我们可以这样做，这样我们就可以使 selection UI 看起来更好（特别是如果我们想要显示缩略图或提供比仅来自一个属性的更多信息）。

我试过了，没有成功。我的对象是具有两个属性的播放器 - 名称和编号：

    <div ng-model="selectedPlayer" ng-options="player.name for player in players">
        {{player.name}} - his number is {{player.number}}
    </div>

我已将列表加载到控制器中，为简洁起见，我不需要显示它。这是行不通的。它只会显示“{{player.name}} - 他的号码是{{player.number}}”字面意思，只显示一次。

我认为我的标记有误或遗漏了某些内容。问题是，一个 select 元素实际上有选项，我相信 ng-options 将数据渲染到这些选项中。我的 div 没有那个，所以我不知道该怎么办。

"ugly" 替代方法是使用 ng-repeat 并将项目连接到控制器的函数 (onSelect(player))：

    <div ng-repeat="player in players">
        {{player.name}} - his number is {{player.number}} <span ng-click="onSelect(player)" />
    </div>

我认为那时我不需要 ng-model，因为它将由控制器的 onSelect(player) 函数处理。不过我不想这样做！

那么，除了 select 元素之外，我们如何使用 ng-options - 而不会干扰控制器来执行 selected 项目绑定？

Answer 1

文档不正确，请参阅 https://github.com/angular/angular.js/blob/v1.4.0-rc.1/src/ng/directive/ngOptions.js#L363

Select 是 ng-options 所必需的。 ng-repeat 是您任务的正确解决方案。

如何在 select 元素上使用 Angular ng-options？

How to use Angular ng-options other than on a select element?

javascript

html

angularjs

selection