除了select元素之外,如何使用Angular ng-options?

时间:2015-05-03 20:05:14

标签: javascript html angularjs selection

官方文档说我们可以在任何元素上使用ng-options,而不仅仅是select。我想我们可以这样做,这样我们就可以让选择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}}”字面上只有一次。

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

“丑陋”的选择是使用ng-repeat并将项目连接到控制器的函数(onSelect(播放器)):

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

我认为我不需要ng-model,因为控制器的onSelect(播放器)功能可以解决这个问题。不过,我不想这样做!

再说一次,除了选择元素之外,我们如何使用ng-options - 而不会让控制器搞乱选择的项目绑定?

1 个答案:

答案 0 :(得分:3)

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

ng-options需要选择。 ng-repeat是您的任务的正确解决方案。