I need to check some condition in angular. So I use the following method.
<span> {{checkValue("test")}} </span>
Then My component like
checkValue(val){
if ("test" == val){
return "value is true"
}
}
in this case the function call continuously.
Is this correct method or suggest me any other idea. Thanks in advance.
The code in you example is perfectly valid, function will be triggered at every change detection pass, there must be something else that triggers change detection i.e. setInterval, http calls and so on.
As #trichetriche mentioned
Binding a variable to a template means that at every lifecycle step,
Angular will check this variable. In the case of a function, it will
call it. You can't stop that (for all I know), and you should not,
otherwise Angular will stop checking for changes on your variables.
You should avoid doing this. I believe you should try find the best solution before doing this.
In your case you can check this in html itself. So it will return true or false.
Try this
<span *ngIf="val =="test""> value is true </span>
Related
I am trying to write a similar true/false statement, Similar to how the .selected() method would work in Angular typescript.
The idea is to show an image if the calculation or *ngIf statement evaluates to True. The code is written in the app.html side
Code:
<img src="/project/x.png" *ngIf="selectedimage.indexOf(v) !== -1"><a href="{{i['link']}}" target="blank" (click)="update_viewed(z)">
There is a *ngFor statement right before this code, with ;let z = index at the end. The overall code creates a # of rows dynamically depending on how many elements exist in an array. (code not provided for this here.) Then, if the user clicks on the href link, the index value is passed into a method, which pushes it to an array. in console.log(this.selectedimage) I can see the values being added in each time I click the href reference. Not sure why the ngIf logic isn't working.
All help much appreciated.
You cannot use indexOf with *ngIf on the template, I would recommend you to create a function that returns true/false based on the logic. Use indexOf within the function and call it with *ngIf
I'm wonder if there's a way to know the difference whether valueChanges on a FormControl was triggered from the dom or the component itself. My use case is I need to do stuff() when the user changes the value, but I don't want to do stuff() if the value changed as a result of something else. Any thoughts?
with the control ".touched"
EXAMPLE:
YourModelForm.get('YourField').touched
the value becomes true when the user enters a value (first click on the field, enter the value, tab or click out of the field).
I tried with a call rest and the value remains to false, try it if you can possibly it works for your situation. :-)
Thanks to #Nobady, who inspired the idea. I found there's actually an option for setValue on the formControl called emitEvent. Using this, I can make it so if I update the value programmatically I can bypass the valueChanges getting called.
I'm working with JavaScript JQuery, and when i try to show the content of the vars in a field, it doesn't work.
There is my code:
function editEvolution(pos, nature, desc, di) {
$('#diE').val(di);
$('#natureE').val(nature);
$('#descE').val(desc);
$('#BtnAddEditEvo').attr('value', "Update");
$('#BtnAddEditEvo').attr('onclick', "doEditEvolution("+pos+")");
}
Thank's in advance for help.
the value of fields $('#diE'), $('#natureE') and $('#descE') doesn't change if the vars nature, desc, are strings but it works if it is a number
The problem is that you are mixing the worst from both the native JS, inline JS and jQuery worlds. You NEVER EVER put code inside a string, period. If you do it, you are doing it wrong.
So.. how to do it properly?
$('#BtnAddEditEvo').val('Update').on('click', function() {
doEditEvolution(pos);
});
In case you call editEvolution multiple times on the same object, add .off('click') before the .on(...) call to unbind previous handlers.
First do not use attr to set onclick...
I will explain what is wrong
$('#BtnAddEditEvo').attr('onclick', "doEditEvolution("+pos+")");
if pos="foo", it will render as
<div onclick="doEditEvolution(foo);"></div>
See the problem? It is looking for a variable foo. You would need to add quotes.
$('#BtnAddEditEvo').attr('onclick', "doEditEvolution('"+pos+"')");
^ ^
Why does a number work? Because numbers do not need quotes. It makes a valid call. It renders as:
<div onclick="doEditEvolution(3);"></div>
What you need to do is use jQuery the right way and use events.
$('#BtnAddEditEvo').on('click', function() { doEditEvolution(pos); });
and you should set value with .val()
What does the following code do:
$('#myelement').is('*')
What does the asterisk signify? Since there is only one element, #myelement, I can't understand the point of using is(), which checks if an element matches a set of elements?
This is some seriously existential JavaScript.
$('#myelement').is('*')
It will fail whenever #myelement doesn't exist, and return true otherwise.
Basically check to see if an element exists or not. Not the best method...
is checks the element fits the criteria. In this case, "*" means all elements.
So, it simply returns true if the previous selector returns anything.
Take a look here for an example: http://jsfiddle.net/b7DwB/
http://api.jquery.com/is/
Pretty much what it does well from my understanding of it at least, and how I tend to use it. Is return true or false on whatever its called on.
Example I have a checkbox that I want to make sure is checked before I submit my form via AJAX I would do something like
if( $('input#tosCheck').is(':checked') ){
/*its checked submit form*/
}else{
alert('Error');
}
All in all the link to the API from jQuery better describes it then I ever could, but I wanted to at least share an example of use to help you gauge some idea.
Can't say I've ever seen that jQuery code used before, but it seems to be a poor way of checking for the existence of an element. Since * is the universal selector, the expression in question will always return true if #myelement exists, otherwise it will return false.
I say this is a "poor" way of checking the existence of an element because you can simply check the length of the jQuery object instead:
$('#myelement').length > 0
I haven't done any testing, but I assume the above is faster since it doesn't have the overhead of the is() function call.
I'm using 1 js for 2 different pages. 1 page doesn't have a div which the other does. So when I submit the values, I get a $( js error
for
$('.description'+save_id+'').html(description_val).show(); //update category description
I suspect that I get the error because there is nothing to show(). Is there a short code I can use to detect if the div.description exists otherwise don't do the function?
jQuery will not error if it has nothing to perform on. The show() would not be a problem. To answer your question, though, you can check the length property on the jQuery object returned from $.
If the description_val variable is undefined, then the code will fail.
Try using an if() statement to only run the code if description_val is not undefined.
if(description_val) {
$('.description'+save_id+'').html(description_val).show();
}
Or if for some reason the value of description_val may be a value that would equate to false, then do this:
if(description_val !== undefined) {
$('.description'+save_id+'').html(description_val).show();
}
From what you posted I'd check to make sure the variables you're using are all defined at this stage. To check for existence you can do this:
if ($('.description' + save_id).size() > 0) {
// code here that operates on the div.
}
This is essentially just a syntactic alternative to checking the length property.