AngularJS ng-bind需要显示变量“string”

发布时间：2020-12-17 06:54:33 所属栏目：安全来源：网络整理

导读：我在模板中创建了一个ng-bind元素,它显示一个舍入一位小数的数字.如何在ng-bind逻辑中添加％到它的末尾？我的代码： span ng-bind="variable | number: 1" class="animated" ng-show="variable" ng-class="{'fadeIn':variable}"/span 结果(例如)4.5但我希望

我在模板中创建了一个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”不起作用.我还想避免在我的控制器/指令中使用额外的代码,因为我认为这更像是一个模板(我只需要使用它几次).

解决方法

问题是您向数字过滤器提供无效数字.相反,您可以在数字过滤器完成后将百分比添加到结尾.

<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

或者你甚至可以创建一个过滤器来执行数字的舍入和％的加法,只需使用该过滤器或其他自定义过滤器来添加百分比(只要确保它不是一个过度杀伤,除非你需要在很多地方做到这一点).

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!