AngularJS ng-bind musi pokazywać zmienną + "ciąg"

Question

Utworzono element ng-bind w moim szablonie, który wyświetla liczbę zaokrągloną o jeden dziesiętny. Jak dodać końcówkę % z poziomu logiki ng-bind?

Mój kod:

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

Wyniki w (na przykład) 4.5 ale chcę go mieć 4.5%.

Chodzi o to, że chcę dodać do końca znak %, ale jak? Wolałbym nie dodawać drugiego zakresu, z tą samą logiką, tylko dla tej jednej postaci, a ng-bind="variable + '%' | number: 1" nie działa. Chciałbym również uniknąć dodatkowego kodu w moich kontrolerach/dyrektywach, ponieważ myślę, że jest to bardziej szablonowa rzecz (i potrzebuję tylko użyć go kilka razy).

Answer 1

Problem polega na podawaniu nieprawidłowego numeru do filtra numeru. Zamiast tego możesz przenieść procent do końca po zakończeniu filtrowania liczb.

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

lub użyć interpolacji

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

Demo

Albo można nawet utworzyć filtr, który wykonuje zaokrąglenie liczby i dodaniu % i po prostu użyć tego filtru lub inny filtr niestandardowy aby dodać procent (po prostu upewnij się, że nie jest to przesada, chyba że musisz to zrobić w wielu miejscach).