可以ngOptions调用一个函数来获取显示文本？

我有一个select标记，我使用AngularJS绑定到一个广播电台对象数组。我的对象具有以下属性：可以ngOptions调用一个函数来获取显示文本？

{ 
    id: 'WXYZ', 
    name: 'Radio Station Name (optional)', 
    frequency: '89.7 FM' 
}

我想每个元素在下拉列表中显示“（编号） - {名} - {}频率”作为显示文本，但由于名称属性是可选，如果对象没有名称的值，我想避免双重破折号。

我能得到这个工作：

<select ng-model="StationPreference" ng-options="s.id+ ' - ' + s.name + ' - ' + s.frequency for s in stations"> 
    <option value="">-- select --</option> 
</select>

什么是规则/指南/最佳调用内部NG选项功能的做法？我想要做一些类似于getDisplayText(s)的东西 - 是什么让表达“有效的角度”？函数是否必须在范围内定义？它可以是任何外部定义的功能吗？这是所需功能的最佳方法吗？

来源

2014-02-14 Brian Oliver

你可以试试'+ s.name || '没有提供名称'+' – tymeJV

是否可以调用内部NG-选项的功能？

简答：是的。（快速测试将还回答了这个给你。）

较长的答案：ng-options允许你指定任意表达式（只要它是有效的角）在这两个选项修真label和value插槽（见the docs）。这意味着您可以在示波器上指定一个可用的函数来生成您的label字符串。

更新：

使用ng-options作为标签值由消耗时所提供的字符串，并将其传递给$parse以产生评估表达式将在下文中称为生成。然后使用循环中的附加本地值针对scope运行该表达式，以实际生成显示的字符串。表达式基本上可以做任何你可能放在{{ interpolation }}（除非我误认为插值也使用$parse来完成），它可以包括连接字符串，调用作用域上可见的函数（它实际上可以存在于父范围上，继承），运行角度滤光器（例如lowercase或json）等

在最佳实践方面，我要说的是，你的s.id+ ' - ' + s.name + ' - ' + s.frequency初始显示是大概为表达罚款而不是将其提取到的一个功能范围。然而，它稍微复杂一些，添加你所期望的条件肯定会把它推到一个函数的边缘（即使它可能作为使用三元的表达式）。一般来说，如果显示逻辑很复杂，或者在多个地方使用相同的逻辑，则应该将其提取到一个函数，甚至是一个过滤器，具体取决于它的通用性。

来源

2014-02-14 16:58:54 squid314

谢谢@ squid314 - 我已经看过文档。 'label：这个表达式的结果将是

+14

Blah blah ..而代之以一些代码示例呢？ – sscarduzio

这个工作对我来说：

<select ng-model="myForm.car" 
     ng-options="obj.id as genName(obj.id,obj.name) for obj in myForm.options"> 
    <option value="">Select...</option> 
</select> 


$scope.myForm.options = [ 
    { id : "nissan", name: "Nissan" }, 
    { id : "toyota", name: "Toyota" }, 
    { id : "fiat" , name: "Fiat" } 
]; 

$scope.genName = function(id,name) { 
    return id + ' ' + name; 
}

来源

2014-02-14 16:58:35 koolunix

您的解决方案是为文本工作，但我想要图像连同文本为前。我有国家名单，我想用国旗显示它，所以我如何显示它？ – Nitin

CSS/HTML不允许在选项中显示图像或背景图像。这是规格的限制。您必须使用自定义指令，例如https://angularjsaz.blogspot.com/2015/11/angularjs-select-option-with-image.html –

它有点隐藏在文档中，但它可以轻松实现。

在你的情况下，记录为语法：

select as label for value in array

所以您需要：

<select ng-model="StationPreference" ng-options="s as getDisplayText(s) for s in stations"> 
    <option value="">-- select --</option> 
</select>

来源

2017-10-27 08:40:56 NicolasP

可以ngOptions调用一个函数来获取显示文本？

回答

相关问题