javascript - can ngOptions call a function to get display text? - Stack Overflow

admin管理员组

文章数量:1204645

I have a select tag that I'm binding to an array of radio station objects using AngularJS. My object has the following properties:

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

I'd like each element in the dropdown to show "{id} - {name} - {frequency}" as the display text, but since the name property is optional, I'd like to avoid double dashes in the event that an object has no value for its name.

I was able to get this working:

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

What are the rules/guidelines/best practices for calling a function inside ng-options? I'd like to do something like getDisplayText(s) -- what makes the expression "valid for angular"? does the function have to be defined inside the scope? Can it be any externally defined function? Is this the best approach for the desired functionality?

I have a select tag that I'm binding to an array of radio station objects using AngularJS. My object has the following properties:

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

I'd like each element in the dropdown to show "{id} - {name} - {frequency}" as the display text, but since the name property is optional, I'd like to avoid double dashes in the event that an object has no value for its name.

I was able to get this working:

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

What are the rules/guidelines/best practices for calling a function inside ng-options? I'd like to do something like getDisplayText(s) -- what makes the expression "valid for angular"? does the function have to be defined inside the scope? Can it be any externally defined function? Is this the best approach for the desired functionality?

• javascript
• angularjs

Share Improve this question Follow edited Feb 14, 2014 at 17:32 Brian Oliver asked Feb 14, 2014 at 16:51 Brian OliverBrian Oliver 1,40722 gold badges1515 silver badges2525 bronze badges 1

• 1 You can try + s.name || 'No name supplied' + – tymeJV Commented Feb 14, 2014 at 16:54

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 13

this worked for me:

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

Is it possible to call a function inside ng-options?

Short answer: yes. (A quick test would have also answered this for you.)

Longer answer: ng-options allows you to specify any arbitrary expression (as long as it is valid for Angular) in both the label and value slots of the options comprehension (see the docs). This means you can specify a function available on the scope to produce your label string.

Update:

The value used by ng-options as the label is generated by consuming the string you provided and passing it to $parse to generate an evaluable expression which will be called later. This expression is then run against the scope with the additional local values from the looping to actually generate the string which is displayed. The expression can do basically anything that you might put in an {{ interpolation }} (interpolations are done with $parse too, unless I'm mistaken), which can include concatenating strings, calling functions visible on the scope (which could actually exist on a parent scope and be inherited), running Angular filters (e.g. lowercase or json), etc.

In terms of best practices, I would say that your initial display of s.id+ ' - ' + s.name + ' - ' + s.frequency is probably fine as an expression rather than extracting it to a function on the scope. However, it is mildly complex and adding the condition you desire would definitely push it over the edge to a function (even though it's possible as an expression using a ternary). In general if the display logic is complex or if the same logic is used in multiple places, it should be extracted to a function, or even a filter depending on how generic it is.

It is a bit hidden in the documentation but it can be achieved easily.

In your case, it is the syntax documented as :

select as label for value in array

And so for you need:

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

本文标签： javascriptcan ngOptions call a function to get display textStack Overflow