在 ng-options 上使用过滤器来更改显示的值

Posted 2023-02-27

【中文标题】在 ng-options 上使用过滤器来更改显示的值

【英文标题】：Use filter on ng-options to change the value displayed

【发布时间】：2013-05-14 17:00:58

【问题描述】：

我想在<select> 中显示一系列价格（0、0.99、1.99... 等）。

我想像这样使用 Angular 的 ng-options

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

正如上面显示的那样，它将生成0、0.99、1.99...

但是我想在代码中使用一个过滤器，这样每次出现 'prices' 这个词（或类似的东西）时，代码都会运行一个函数来将浮点数更改为字符串和存在（free、0.99$、1.99$...等）。

我有办法吗？

谢谢

【参考方案1】：

有一个更好的方法：

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

然后像这样使用它：

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

这样，过滤器对单个值很有用，而不是只对数组进行操作。如果您有对象和相应的格式过滤器，这非常有用。

过滤器也可以直接在代码中使用，如果需要的话：

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

【讨论】：

谢谢！除了您添加的语法错误 - 不需要第四行圆括号。除此之外，答案效果很好！

为清楚起见，您可以在表达式中添加括号：obj as (obj | price) for obj in prices。语法稍微不那么令人生畏。

如果有其他人来到这里寻找与ng-options 一起使用的标准货币过滤器，那么这可能很有用：option as (option | currency:'$':0) for option in pricesArr

【参考方案2】：

您要创建自定义过滤器，例如：

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

像这样使用它：

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

【参考方案3】：

请原谅伪代码

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

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

【讨论】：

请尽量充实你的答案。仅仅发布一个没有任何解释或上下文的代码块是不好的。在当前状态下，您的答案可能对未来寻找此问题答案的人没有多大用处。

谢谢！这就是我要找的东西..( obj.property | myFilter ) for obj in objects，但是是的，解释是关键