web-dev-qa-db-fra.com

Utilisez filter sur ng-options pour changer la valeur affichée

J'ai un tableau de prix (0, 0.99, 1.99... etc) que je souhaite afficher en <select>.

Je veux utiliser Angular's ng-options comme ça

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

Comme il est affiché ci-dessus, il générera une sélection de 0, 0.99, 1.99...

Mais je veux utiliser un filtre dans le code tel que chaque fois que le mot 'prices' est présenté (ou quelque chose comme ça), le code exécutera une fonction pour changer les nombres flottants en chaînes et présenter (free, 0.99$, 1.99$... etc).

J'ai un moyen de faire ça?

Merci

angularjsfilterng-options
49
TidharPeer

Il y a un meilleur moyen:

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

Ensuite, utilisez-le comme ceci:

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

De cette façon, le filtre est utile pour des valeurs uniques, plutôt que de fonctionner uniquement sur des tableaux. Si vous avez des objets et des filtres de formatage correspondants, cela est très utile.

Les filtres peuvent également être utilisés directement dans le code, si vous en avez besoin:

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

Vous voulez créer le filtre personnalisé tel que:

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

utilisez-le comme:

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

Pardonnez le pseudo code

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