javascript - 除了选择元素之外，如何使用 Angular ng-options？

Question

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

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

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

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

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

“丑陋”的替代方法是使用 ng-repeat 并将项目连接到 Controller 的函数 (onSelect(player)):

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

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

再说一遍，除了选择元素之外，我们如何使用 ng-options - 而不会干扰 Controller 来进行所选项目绑定(bind)？

Answer 1

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

对于 ng-options，Select 是必需的。 ng-repeat 是适合您任务的正确解决方案。