angularjs - obtener - select angular 6

Use el filtro en ng-options para cambiar el valor mostrado

Question

Tengo una variedad de precios ( 0 , 0.99 , 1.99 ... etc) que quiero mostrar en <select> .

Quiero usar las ng-options de Angular como esta

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

Como se muestra arriba, generará una selección de 0 , 0.99 , 1.99 ...

Pero quiero usar un filtro en el código de modo que cada vez que se presente la palabra ''precios'' (o algo así), el código ejecutará una función para cambiar los números flotantes a cadenas y presente ( free , 0.99$ , 1.99$ ... etc).

¿Hay una manera de hacer eso?

Gracias

Answer 1

Desea crear el filtro personalizado como:

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

utilízalo como:

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

Answer 2

Hay una mejor manera:

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

Entonces úsalo así:

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

De esta manera, el filtro es útil para valores individuales, en lugar de operar solo en arreglos. Si tiene objetos y los filtros de formato correspondientes, esto es bastante útil.

Los filtros también se pueden usar directamente en el código, si los necesita:

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

Answer 3

Perdonen el pseudo codigo

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

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