AngularJS ng-ràng buộc cần hiển thị biến + "chuỗi"

Question

Tôi đã tạo một phần tử ng-bind trong mẫu của tôi, hiển thị số được làm tròn bởi một số thập phân. Làm cách nào để thêm một số % vào cuối, từ trong logic ng-bind?

Mã của tôi:

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

Kết quả trong (ví dụ) 4.5 nhưng tôi muốn nó được 4.5%.

Vấn đề là tôi muốn thêm % ký tự vào cuối, nhưng làm cách nào? Tôi không muốn thêm khoảng thứ hai, với cùng một logic, chỉ cho một ký tự đó và ng-bind="variable + '%' | number: 1" không hoạt động. Tôi cũng muốn tránh thêm mã trong bộ điều khiển của tôi/chỉ thị, vì tôi nghĩ rằng đây là một điều mẫu hơn (và tôi chỉ cần sử dụng nó chỉ là một vài lần).

Answer 1

Vấn đề là bạn đang kích hoạt số không hợp lệ cho bộ lọc số. Thay vào đó, bạn có thể di chuyển thêm phần trăm vào cuối sau khi bộ lọc số được thực hiện.

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

Hoặc sử dụng nội suy

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

Demo

Hoặc thậm chí bạn có thể tạo ra một bộ lọc mà thực hiện làm tròn số và bổ sung % và chỉ sử dụng bộ lọc đó, hoặc một bộ lọc tùy chỉnh để thêm phần trăm (Chỉ cần đảm bảo rằng nó không phải là quá mức cần thiết, trừ khi bạn cần thực hiện ở nhiều nơi).