Question

我有一个select标签，我使用AngularJS绑定到一系列无线电台对象。我的对象具有以下属性：

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

我希望下拉列表中的每个元素都显示“{id} - {name} - {frequency}”作为显示文本，但由于name属性是可选的，我希望避免使用双重破折号对象没有名称值的事件。

我能够做到这一点：

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

在ng-options中调用函数有哪些规则/指南/最佳实践？我想做getDisplayText(s)之类的事情 - 是什么让表达“对角有效”？该功能是否必须在范围内定义？可以是任何外部定义的功能吗？这是所需功能的最佳方法吗？

Answer 1

这对我有用：

<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;
}

Answer 2

是否可以在ng-options中调用函数？

简短回答：是的。（快速测试也会为你解答这个问题。）

更长的答案：ng-options允许您在选项理解的label和value个插槽中指定任意表达式（只要它对Angular有效）（请参阅{ {3}}）。这意味着您可以指定范围内可用的函数来生成label字符串。

<强>更新

ng-options使用的值作为标签是通过使用您提供的字符串并将其传递给$parse来生成的，以生成可评估的表达式，稍后将调用该表达式。然后使用循环中的其他本地值对scope运行此表达式，以实际生成显示的字符串。表达式基本上可以做任何你可能放在{{ interpolation }}中的内容（插值也是用$parse完成的，除非我弄错了），它可以包括连接字符串，调用在作用域上可见的函数（实际上可以存在于父作用域上并被继承），运行Angular过滤器（例如lowercase或json）等。

就最佳实践而言，我会说你s.id+ ' - ' + s.name + ' - ' + s.frequency的初始显示可能是一个表达式，而不是将其提取到范围内的函数。然而，它有点复杂，并且添加你想要的条件肯定会将它推到一个函数的边缘（即使它可以作为使用三元组的表达式）。通常，如果显示逻辑很复杂，或者在多个地方使用相同的逻辑，则应将其提取到函数，甚至是过滤器，具体取决于它的通用程度。

Answer 3

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

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

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>

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

3 个答案: