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%。

问题是，我想在它的末尾添加一个%-character，但是怎么做呢？我不想添加第二个跨度，使用完全相同的逻辑，只针对一个字符，而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>

或者，您甚至可以创建一个过滤器来执行数字的舍入和%的相加，并只使用该过滤器，或者创建另一个自定义过滤器来添加百分比(只需确保它不是过度杀伤力，除非您需要在很多地方执行此操作)。