I'm using the following filter inside a h3:
{{ event.date | date:'dd-MM-yyyy' }}
And is working just fine, the angular is formatting and showing the date like I want. I'm trying to apply the same filter inside an ng-model:
ng-model="event.date | date:'dd-MM-yyyy'"
And this is not working, is throwing an error:
Error: ngModel:nonassign
Non-Assignable Expression
Expression 'event.date' is non-assignable. Element: {1}
Could you someone explain me why?
Thanks!
That is not possible the way you are trying to do.
An alternate solution will be using input masking. There are some libraries available already for the task such as ngMask and angular-input-masks.
https://github.com/candreoliveira/ngMask
https://github.com/assisrafael/angular-input-masks
From the documentation:
The ngModel directive binds an input,select, textarea (or custom form
control) to a property on the scope
https://docs.angularjs.org/api/ng/directive/ngModel
ng-model needs a variable that it can 2-way data-bind to but the filters output is not assignable.
Related
I am aware of how to use Angular's date pipe with typical string interpolation examples and/or for loops. However, I have a situation that's different than both these scenarios - where I've created a kind of custom two-way binding in my Angular 2 app.
This is what my template code looks like:
<input class="app-input [(inputModel)]="staff.profile.hireDate" placeholder="None"
[field-status]="getPropertyStatus('profile.hireDate')"/>
Is there a way I can pass the date pipe in here? I've tried passing it in like this:
<input class="app-input [(inputModel)]="staff.profile.hireDate" placeholder="None"
[field-status]="getPropertyStatus('profile.hireDate') | date"/>
... but that doesn't work. It doesn't throw an error, it just doesn't modify the date formatting. I also tried wrapping the whole expression in brackets - and that through an error.
Is there a way I can pass the date pipe here in the view, or do I need to handle this differently - for instance as part of a function in my component? Looking for the simplest solution here.
One way to use the interpolated value instead of the binding:
<input class="app-input [(inputModel)]="staff.profile.hireDate" placeholder="None"
field-status="{{getPropertyStatus('profile.hireDate') | date}}" />
The angular expression is {{ notification.noti_val }}.
The value stored in the expression is saha like own wall.
How can I remove the characters?
You need to specify your value as safe html. In angular you can use $sceservice to do so. I have created this jsbin explaining the use case and it fixes your issue
I'm using ng-tranlate for i18n.
I'd like to combine a translated label together with a variable resolved from controller binding. How can I achieve the following?
<div translate="my.lang.text">some more: {{controller.attribute}}</div>
This does not work, and ng-translate ignores any content between the divs. why?
The translate directive will replace the content of the element with the translation you pass to it.
The use case you are describing looks like a parameterized translation. If you want to keep the use of the directive, you could pass the variable through the translate-values directive:
<div translate="my.lang.text"
translate-values="{value: 'some more: ' + controller.attribute}"></div>
You have to specify that your translation is parameterized:
JSON
"my.lang.text": "This is a parameterized string {value}"
I believe the translate directive replaces all the element's content with the translation.
In this case, you probably want to use the translate filter instead.
<div>{{'my.lang.text' | translate}} some more: {{controller.attribute}}</div>
As an alternative, you could also avoid this issue by giving the translated value it's own element.
<div><span translate="my.lang.text"></span> some more: {{controller.attribute}}</div>
If the translation is always intended to have have a value appended to it, then using a parameterized translation is probably the best solution (as suggested by Michael https://stackoverflow.com/a/33419608/90305)
I want to have a string that goes through angular's filter as a parameter for a javascript function. Angular doesn't parse it, how do I fix this?
<input type="text" ng-required="true" ng-model="foobar"
oninvalid="this.setCustomValidity({{ 'String' | myfilter }})">
The {{ .. }} does not go through Angular's parsing. If I remove the double quotation marks it still doesn't work as Angular 'fixes' it to be oninvalid="this.setCustomValidity("{{
Also, if there is another, more angular way of customizing the browser validation message, that would do the trick for me also.
You might want to read the angular documentation for input, in particular the example plunker provides the solution to your question.
If you still want a hint on what to do to use a filter in your argument please provide information about your oninvalid directive.
You can pass foobar directly
oninvalid="this.setCustomValidity({{ 'String' | myfilter(foobar) }})"
im currently using Angular implementation of the
Sweet alert
I want to pass to the title an Angular directive with translate
This is the variable I'm passing as title
{{ 'register.confirmation_modal.SUPERIOR_MESSAGE' | translate }}
And using Angular Compile Service
var translate_title = "<span>{{ 'sa.title' | translate }}</span>";
var compiled_title = $compile(translate_title)($scope);
and using html: true, in Sweet alert options
But i'm getting an object and it's being printed like the follow image
I tried using .innerHTML but it removes the Tags and gets the literal string with the curly braces {{ }}
JSON.stringify didn't worked either.
Any advice?
Credits to #Claies for pointing me to the solution
Instead of using $compile I solved my issue using the Filter translate from Angular translate
This did the trick:
var n = $filter('translate')('sa.title');
Regards.