AngularJS ng-bind muss Variable + "string" anzeigen

Question

Ich habe in meiner Vorlage ein ng-bind Element erstellt, das eine Zahl anzeigt, die mit einer Dezimalstelle gerundet wird. Wie füge ich ein % an das Ende davon, aus der.Logik?

Mein Code:

<span ng-bind="variable | number: 1" 
     class="animated" ng-show="variable" 
     ng-class="{'fadeIn':variable}"></span> 

Ergebnisse (zum Beispiel) 4.5 aber ich will es 4.5% sein.

Die Sache ist, ich möchte ein %-Zeichen an das Ende hinzufügen, aber wie? Ich würde lieber nicht einen zweiten Bereich hinzufügen, mit genau der gleichen Logik, nur für dieses eine Zeichen, und ng-bind="variable + '%' | number: 1" funktioniert nicht. Ich würde auch gerne zusätzlichen Code in meinen Controllern/Direktiven vermeiden, da ich denke, dass dies mehr eine Template-Sache ist (und ich brauche sie nur ein paar Mal zu benutzen).

Answer 1

Problem ist die Eingabe einer ungültigen Nummer für den Zahlenfilter. Stattdessen können Sie die Addition des Prozentsatzes bis zum Ende nach dem Zahlenfilter verschieben.

<span ng-bind="(variable | number: 1) + '%'" 
    class="animated" ng-show="variable" 
    ng-class="{'fadeIn':variable}"></span> 

oder benutzen Interpolation

<span class="animated" ng-show="variable" ng-class="{'fadeIn':variable}">{{variable | number: 1}}%</span> 

Demo

Oder Sie könnten sogar einen Filter erstellen, der Anzahl und der Zugabe von % führt Runden und verwenden nur diesen Filter oder eine andere benutzerdefinierte Filter um einen Prozentsatz hinzuzufügen (stellen Sie einfach sicher, dass es kein Overkill ist, es sei denn, Sie müssen es an vielen Stellen tun).