Monday 15 February 2010

angularjs - How to prevent trimming on bound values in Angular -



angularjs - How to prevent trimming on bound values in Angular -

consider next html fragment:

<div class="text-center"> <h3>laeq: <span class="monospace"><strong>{{ laeq | paddednumber : 7 : 2 }}</strong></span> db</h3> </div>

where paddednumber filter adds leading spaces:

myfilters.filter('paddednumber', function () { homecoming function (value, width, decimals) { if (value === undefined) return; var result = value.tofixed(decimals); while (result.length < width) { result = ' ' + result; }; homecoming result; }; });

how prevent angular trimming leading spaces filter has added? found ng-trim alternative textarea , input directives, laeq in sample above bound $resource , needs filtered formatting right. of course of study formatting in controller , utilize ng-model on textarea bind formatted value in scope, hoping simpler solution in html code.

angular not 1 it's trimming leading spaces, it's browser 1 responsible that. instance, consider this example:

<div> hello <span> han</span> </div>

this pure html (no angular), can see when browser renders markup, browser ignores white spaces, carriage returns , tabs appear until next tag or blog of text. standard behaviour of browsers.

for instance if right click on same page , select alternative "view page source", see there're lots of spaces, tabs , carriage returns beingness ignored. may find this:

<a href="/review" title="review queues - help improve site"> review </a>

do see characters beingness ignored browser?

that's why when want browser: "hey, white space want render" can utilize symbol: &nbsp;, want utilize this.

but if want custom filter render symbol (&nbsp;) need either utilize unicode equivalent, in case \u00a0.

that's why i've changed filter, this:

.filter('paddednumber', function () { homecoming function (value, width, decimals) { if (value === undefined) return; var result = value.tofixed(decimals); var spacestoadd = width-result.length; for(var i=0;i<spacestoadd;i++) result = '\u00a0' + result; homecoming result; }; }); working example

angularjs data-binding

No comments:

Post a Comment