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>

<强> Demo

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