kann ngOptions eine Funktion aufrufen, um Anzeigetext zu erhalten?

Question

Ich habe einen select Tag, den ich mit AngularJS an ein Array von Radio-Station-Objekten binde. Mein Objekt hat die folgenden Eigenschaften:

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

ich in der Dropdown-Liste jedes Element möchte zeigen "{id} - {name} - {Frequenz}" als Text im Display, aber da der Namen Eigenschaft ist optional Ich möchte doppelte Bindestriche vermeiden, wenn ein Objekt keinen Wert für seinen Namen hat.

konnte ich diese Funktion erhalten:

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

Was sind die Regeln/Richtlinien/Best Practices für eine Funktion innerhalb ng-Optionen aufrufen? Ich möchte etwas wie getDisplayText(s) machen - was macht den Ausdruck "gültig für eckig"? Muss die Funktion innerhalb des Bereichs definiert werden? Kann es irgendeine extern definierte Funktion sein? Ist dies der beste Ansatz für die gewünschte Funktionalität?

Answer 1

Ist es möglich, eine Funktion innerhalb ng-Optionen zu nennen?

Kurze Antwort: ja. (Ein kurzer Test auch dies für Sie beantwortet haben würde.)

Lange Antwort: ng-options können Sie jeden beliebigen Ausdruck geben (so lange, wie es für Angular gültig ist) sowohl in den label und value Schlitze des Verstehens Optionen (siehe the docs). Das bedeutet, dass Sie eine für das Oszilloskop verfügbare Funktion angeben können, um Ihre label Zeichenfolge zu erstellen.

Update:

Der Wert von ng-options als Markierung verwendet wird, erzeugt durch den String raubend Sie zur Verfügung gestellt und weitergeben zu $parse einen auswertbaren Ausdruck zu erzeugen, die später genannt werden. Dieser Ausdruck wird dann mit den zusätzlichen lokalen Werten aus der Schleife gegen die scope ausgeführt, um die angezeigte Zeichenfolge tatsächlich zu generieren. Der Ausdruck kann grundsätzlich alles, was Sie in eine {{ interpolation }} setzen (Interpolationen sind mit $parse auch getan, wenn ich mich täusche), die Verkettung Strings, Aufrufen von Funktionen auf dem Bereich sichtbar (die tatsächlich auf einem übergeordneten Bereich und existieren könnte) vererbt werden), Laufwinkel Filter (zB lowercase oder json) usw.

In Bezug auf best Practices, würde ich sagen, dass Ihre erste Anzeige s.id+ ' - ' + s.name + ' - ' + s.frequency als Ausdruck wahrscheinlich in Ordnung ist, anstatt es zu einer Funktion auf dem Extrahieren Umfang. Es ist jedoch leicht komplex und das Hinzufügen der Bedingung, die Sie wünschen, würde es definitiv über den Rand zu einer Funktion (obwohl es als Ausdruck mit einem ternären möglich ist) schieben. Im Allgemeinen, wenn die Anzeigelogik komplex ist oder wenn dieselbe Logik an mehreren Stellen verwendet wird, sollte sie zu einer Funktion oder sogar einem Filter extrahiert werden, abhängig davon, wie allgemein sie ist.

Answer 2

dies für mich gearbeitet:

<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 3

Es ist ein wenig in der Dokumentation versteckt, aber es kann leicht erreicht werden.

In Ihrem Fall ist es die Syntax wie dokumentiert:

select as label for value in array 

Und so für Sie brauchen:

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