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

Question

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

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

我希望下拉列表中的每个元素都显示"{id} - {name} - {frequency}"作为显示文本,但由于name属性是可选的,所以我希望避免双重破折号object没有名称的值.

我能够让这个工作:

<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有效)(请参阅文档).这意味着您可以指定范围上可用的函数来生成label字符串.

更新:

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

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