AngularJS ng-bind需要显示变量+“字符串”

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

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