【问题标题】:How to use Angular ng-options other than on a select element?如何在选择元素上使用Angular ng-options?
【发布时间】:2015-05-04 04:40:51
【问题描述】:

官方文档说我们可以在任何元素上使用 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}} - his number is {{player.number}}”字面意思,只显示一次。

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

“丑陋”的替代方法是使用 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 - 而不会弄乱控制器来进行选定项绑定?

【问题讨论】:

  • 您可以链接到您阅读本文的文档部分吗?据我所知,ngOptions 可以严格与 select 元素一起使用
  • docs.angularjs.org/api/ng/directive/ngOptions 在“用法”部分下显示该标签的任何内容。
  • 我很确定这只是属性的通用示例用法。该页面的标题表明它只能用于select“ngOptions 属性可用于使用通过评估 ngOptions 理解获得的数组或对象为
  • 好的,所以“选择性阅读”让我明白了。为什么他们说任何标签仍然让我很困惑。

标签: javascript html angularjs selection


【解决方案1】:

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

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

【讨论】:

    猜你喜欢
    • 2016-01-22
    • 2014-01-26
    • 2014-04-19
    • 1970-01-01
    • 2015-07-31
    • 1970-01-01
    • 1970-01-01
    • 2017-09-26
    • 2017-12-31
    相关资源
    最近更新 更多