AngularJS ng-bind 需要显示变量 + "string"

Question

我在模板中创建了一个ng-bind元素，它显示一个四舍五入的数字。如何从ng-bind逻辑中将%添加到它的末尾？

我的代码：

<span ng-bind="variable | number: 1" 
      class="animated" ng-show="variable" 
      ng-class="{'fadeIn':variable}"></span>

结果是（例如）4.5，但我希望它是4.5%。

问题是，我想在它的末尾添加一个%字符，但如何添加呢？我宁愿不为这一个字符添加第二个具有完全相同逻辑的跨度，而ng-bind="variable + '%' | number: 1"不起作用。我还想避免在我的控制器/指令中使用额外的代码，因为我认为这更像是一个模板（我只需要使用几次）。

Answer 1

问题是您向数字过滤器提供了无效的数字。相反，您可以在数字筛选完成后将百分比的添加移动到末尾。

<span ng-bind="(variable | number: 1) + '%'" 
  class="animated" ng-show="variable" 
  ng-class="{'fadeIn':variable}"></span>

或者使用插值

<span class="animated" ng-show="variable" ng-class="{'fadeIn':variable}">{{variable | number: 1}}%</span>

演示

或者，您甚至可以创建一个执行数字四舍五入和%相加的过滤器，然后只使用该过滤器，或者另一个自定义过滤器来添加百分比（只需确保它不是过度使用，除非您需要在很多地方这样做）。