luifNumber

A interesting filter when displaying numbers aligned to the right in a table when some of them have a non integer part and some don't and nothing is aligned and it's horrible.

It is a slight modification of the filter number provided by angular but it puts the non integral part in an invisible span if this part is zero, allowing it to be correctly aligned in a table of values with text-align: right

The generated html looks like this integralPart<span>separator and decimalPart<span>. When the decimal part is null, the span has its opacity set to 0. That means that you can apply your own style to the span with the right css selector, for example in the following table I applied font-size: 90%; opacity: .6; to the decimal part of te result of luifNumber by adding the class luifNumberValue to my cell and targetting luifNumberValue > span.

Numeric values:

myValue
myValue | number : 2
myValue | luifNumber : 2
0,5
{{0.5 | number : 2}}
10,5
{{10.5 | number : 2}}
10
{{10 | number : 2}}
10000
{{10000 | number : 2}}
1000,54368
{{1000.54368 | number : 2}}
0.0001
{{0.0001 | number : 2}}

Edge cases, what happens when the value provided is not numeric or is undefined? For non numeric values it will return the value but with a margin on the right to be aligned with the integer part of the other values. For undefined you can provide a value for it to use instead. By default luifNumber will treat undefined as ''

myValue
myValue | number : 2
myValue | luifNumber : 2
myValue | luifNumber : 2 : 0
myValue | luifNumber : 2 : 3.1415
myValue | luifNumber : 2 : '-'
for alignment reference: 40
{{40 | number : 2}}
for alignment reference: 0.5
{{0.5 | number : 2}}
'a string'
{{'a string' | number : 2}}
undefined
{{undefined | number : 2}}

Important: May require ngSanitize as what the filter produce is 10<span style="opacity:0">.00</span>. However, this page does not depend on ngSanitize and everything seems fine, so...

Usage

<ANY ng-bind-html="myValue | luifNumber : 2"></ANY>
<ANY ng-bind-html="myValue | luifNumber : 2 : 0"></ANY>
<ANY ng-bind-html="myValue | luifNumber : 2 : 'a placeholder string for undefined values'"></ANY>

MyValue : {{myValue}}

With filter number : {{myValue | number : 2}}

With luifNumber :