angularjs - 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"无法正常工作。我还想避免在 Controller /指令中添加多余的代码，因为我认为这更多是模板内容(我只需要使用几次)。

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

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