CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-filter
Polina F.
Polina F.

Reputation: 649

AngularJS filter refresh for placeholder

I am using filter to localize my page. AngularJS filters only refresh when the key is changing unless they are expressions (or objects) and then they are evaluated on every digest cycle. https://docs.angularjs.org/guide/filter

So instead of writing this:

<div>{{'name' | localFilter}}</div>

I used a little trick and wrote the 'name' as expression to trigger filter refresh on every digest cycle. I defined variable localize=true

<div>{{localize && ('name' | localFilter)}}</div>

and it worked. BUT it doesn't work when I need to localize placeholder, as you can see from the snippet the localized values got the ja-Jp prefix, but the placeholder didn't

<input id="username" type="text" ng-attr-placeholder="{{localize && ('example_email' | localFilter) }}" />

enter image description here Any ideas? I know about stateful filters - that doesn't work for me because I have many other pages where I will just reload for the lozalisation to happen

Upvotes: 0

Views: 631

Answers (2)

Baruch
Baruch

Reputation: 2428

Well, as the comment say in vp_arth's answer. The tags are confusing. If this is an AngularJS question, then refer to vp_arth's answer, if not, you need to do this:

<input id="username" type="text" [placeholder]="localize && ('example_email' | localFilter)" />

This way Angular understands that the attribute value to the element will be an expression and not a string. This way, it can be any type (boolean, number, string, function, object, etc...)

Upvotes: 1

vp_arth
vp_arth

Reputation: 14992

In angular.js you can use ng-attr-X attributes for render of X attributes.

Try to use ng-attr-placeholder for that reason. 

<input id="username" type="text" 
       ng-attr-placeholder="{{localize && ('example_email' | localFilter) }}" />

Upvotes: 1

Related Questions