wake-up-neo.com

Verwenden Sie den Filter für ng-Optionen, um den angezeigten Wert zu ändern

Ich habe eine Reihe von Preisen (0, 0.99, 1.99 Usw.), die ich in <select> Anzeigen möchte.

Ich möchte Angulars ng-options So verwenden

<select ng-model="create_price" ng-options="obj for obj in prices"/>

Wie oben angezeigt, wird eine Auswahl von 0, 0.99, 1.99 ... generiert.

Aber ich möchte einen Filter im Code verwenden, so dass jedes Mal, wenn das Wort 'prices' (oder so ähnlich) angezeigt wird, der Code eine Funktion ausführt, um die Gleitkommazahlen in Zeichenfolgen und Darstellungen zu ändern (free, 0.99$, 1.99$ ... usw.).

Ich habe da einen Weg, das zu tun?

Vielen Dank

angularjsfilterng-options
49
TidharPeer

Es gibt einen besseren Weg:

app.filter('price', function() {
  return function(num) {
    return num === 0 ? 'free' : num + '$';
  };
});

Dann benutze es so:

<select ng-model="create_price" ng-options="obj as (obj | price) for obj in prices">
</select>

Auf diese Weise ist der Filter für einzelne Werte nützlich, anstatt nur für Arrays zu arbeiten. Wenn Sie Objekte und entsprechende Formatierungsfilter haben, ist dies sehr nützlich.

Filter können bei Bedarf auch direkt im Code verwendet werden:

var formattedPrice = $filter('price')(num);
114
shawkinaw

Sie möchten den benutzerdefinierten Filter wie folgt erstellen:

app.filter('price', function() {
  return function(arr) {
    return arr.map(function(num){
      return num === 0 ? 'free' : num + '$';
    });
  };
});

benutze es wie:

<select ng-model="create_price" ng-options="obj for obj in prices | price">
  {{ obj }}
</select>
7
Tosh

Verzeihen Sie den Pseudocode

data-ng-options="( obj.property | myFilter ) for obj in objects"

app.filter('myFilter', function() {
  return function(displayValue) {
    return (should update displayValue) ? 'newDisplayValue' : displayValue;
});
2
adrian