I'm new to Angular and I don't know how to do this kind of action. I have these buttons:
<button *ngIf="entryControlEnabled && !gateOpen" class="bottomButton red" (click)="openGate()">Open</button>
<button *ngIf="entryControlEnabled && gateOpen" class="bottomButton green" (click)="closeGate()">Close</button>
And In .ts file I have this:
if (data.IoNumber == config.IoNumberGates) {
if (data.IoStatus == "DetectorDeactivated") {
this.gateOpen = true;
} else {
this.gateOpen = false;
}
}
I want to change data.IoStatus == "DetectorDeactivated" to data.IoStatus == "DetectorActivated"
I want to illustrate what I mean:
openGate(){
this.data.IoStatus == "DetectorActivated"
}
closeGate(){
this.data.IoStatus == "DetectorDeactivated"
}
Can someone help me please?
Assuming you want to switch variable this.gateOpen to true or false and this.gateOpen, openGate and closeGate belongs to same component. Your functions should look like this.
openGate(){
// this.data.IoStatus == "DetectorActivated";
// it's wrong, this is comparison not assignement
this.data.IoStatus = "DetectorActivated";
}
closeGate(){
// this.data.IoStatus == "DetectorDeactivated";
// it's wrong, this is comparison not assignement
this.data.IoStatus = "DetectorDeactivated";
}
Hope it helps
if (data.IoNumber == config.IoNumberGates) {
if (data.IoStatus == "DetectorDeactivated") {
this.gateOpen = true;
} else {
this.gateOpen = false;
}
}
Make sure this code runs on correct event, in your case it should be click event or something. Else just directly change the this.gateOpen variable in functions like this.
openGate(){
this.gateOpen = true;
}
closeGate(){
this.gateOpen = false;
}
It would be easier to use a slide / switch toggle. Below I am using Angular Material Slide Toggle.
View:
<mat-slide-toggle #approve (change)="toggle($event)" [labelPosition]="'before'">
{{approve.checked? "Detector Activated": "Detector Activate"}}</mat-slide-toggle>
Component:
toggle(event: MatSlideToggleChange) {
console.log('Toggle fired');
if(event.checked)
this.data.IoStatus = "DetectorActivated";
else
this.data.IoStatus = "DetectorActivated";
}
Related
I got a little problem that I can't solve...
I usually check my form like this:
function checkFirst(field) {
if (field.value.length < 2 || !regLetters.test(field.value)) {
//do something
} else {
//do something else
firstNameOk = true;
}
}
and on the HTML side with onblur="checkFirst(this)".
Now I'm using OOP and I can't use my methods in onblur and I don't know how I could call the class in the onblur HTML attribute...
I already got a solution to work around this without using onblur in HTML and in my case I'd like to know if it's possible or not.
Anyone to help me please?
Edit:to avoid people telling me to use addEventlistener i show you my solution that works fine but not the one i wanted to use...
this.data.forEach(item => item.addEventListener('blur', function () {
console.log(item.id)
// check first name field //
if (item.id === "first") {
if (item.value.length < 2 || !this.regLetters.test(item.value)) { // if this field length =
this.highlightField(item, true);
} else {
this.highlightField(item, false);
this.errorMessagesReset(item);
this.firstNameOk = true;
}
// check last name field //
} else if (item.id === "last") {
if (item.value.length < 2 || !this.regLetters.test(item.value)) {
this.highlightField(item, true);
} else {
this.highlightField(item, false);
this.errorMessagesReset(item);
this.lastNameOk = true;
}
// check email field //
} else if (item.id === "email") {
if (item.value.length < 2 || !this.regmail.test(item.value)) {
this.highlightField(item, true);
} else {
this.highlightField(item, false);
this.errorMessagesReset(item);
this.emailOk = true;
}
// check textarea field //
} else if (item.id === "message") {
if (item.value.length < 1 || item.value > 100) { // if length of item is sup or equal to 1 and
this.highlightField(item, true);
} else {
this.highlightField(item, false);
this.errorMessagesReset(item);
this.messageOk = true;
}
}
}.bind(this))); ```
It should be a static function that belongs to the class then. That way you can call it directly.
I want to make the alert appear if the number of infant is more than adults.
I've tried but it looks like something went wrong.
Please help.. thanks before
ex: http://jsfiddle.net/pBxfX/132/
var button = $('#submit'),
adult = $('#adult option:selected').val(),
infant = $('#infant option:selected').val();
if(adult > infant) {
$("#alert").hide;
}
else if(adult == infant) {
$("#alert").hide;
}
else {
$("#alert").show;
}
A few things:
You need to treat hide and show as methods (call them as .hide() and .show())
You need to execute your checking code in the change event handler for the select.
When comparing adults to infants, you need to treat them as integers (they are currently being treated as strings).
See http://jsfiddle.net/pBxfX/133/ for updated code
var button = $('#submit');
$(document).ready(function() {
$(button).attr('disabled', true);
$('input[type="text"]').on('keyup', function() {
var from = $("#from").val(),
to = $("#to").val();
if (from != '' && to != '') {
$(button).attr('disabled', false);
} else {
$(button).attr('disabled', true);
}
});
// Run code when any <select> changes
$("select").on('change', function() {
var adult = parseInt($('#adult option:selected').val()); //convert to integers for comparison
var infant = parseInt($('#infant option:selected').val()); //convert to integers for comparison
if (adult > infant) {
$("#alert").hide(); //Note that it is .hide() not .hide
} else if (adult == infant) {
$("#alert").hide();
} else {
$("#alert").show();
}
});
});
hide() and show() are functions so you need to add () to call these functions.
if(adult > infant) {
$("#alert").hide();
}
else if(adult == infant) {
$("#alert").hide();
}
else {
$("#alert").show();
}
How do I get a pretty simple true/false-statement if the mouse is over a div event = true else event = false
var test = $("#main-nav").on("mouseenter", function (e) {
e.preventDefault();
console.log(e.preventDefault());
return true;
});
if (test === true) {
//do something
} else {
//something different
}
If I understand your question correctly:
if($("#main-nav").is(":hover")) {
//do something
}else{
//something different
}
In pseudo code:
if the cursor is over #main-nav
do something
if it's not
do something else
If you want test to always be set:
var test = false;
$("#main-nav").on("mouseenter", function(e){
e.preventDefault();
test = true;
}).on("mouseleave", function(e){
e.preventDefault();
test = false;
});
This way,
if(test === true) {
//do something
}else{
//something different
}
will always work.
You can have a boolean (true/false) variable that will constantly update by doing this:
var hovering;
$("#main-nav").mouseenter(function(){
hovering = true;
});
$("#main-nav").mouseleave(function(){
hovering = false;
});
So whenever it is called it will tell you if the mouse is within your div:
if (hovering){
// mouse within div
} else {
// mouse not within div
}
If you necessarily need is as a variable:
var test = false;
$("#main-nav").on("mouseenter", function (e) {
test = true;
});
$("#main-nav").on("mouseout", function (e) {
test = false;
});
//....
if (test === true) {
//do something
} else {
//something different
}
I need to perform some task based on 2 conditions on page load.
1) If a button is clicked or
2) If condition becomes true
so can I combine this two events into one?
if(x== true) || button.click(function(e){
..
perform task...
}
var perform_task = function() {
....
}
if(x == true) perform_task();
button.click(function(er) { perform_task(); }
try this?
button.click(function(){
if(x == true){
/* do something */
}
});
var flag = false;
$("button").click(function() {
flag = true;
});
if((x== true) || flag ){
// do here
}
I have some function inside click action. I need to stop this function if the last of my html list element will be have some id, so I do this but function does not work... Can you help me?
carousel_controls_buttons.on('click', function(){
var settings_list_last_element_id = settings_menu_element.attr('id') == 'r_00';
if (settings_menu_element.last(id === settings_list_last_element_id)) {
}
else {
renumNext();
}
});
Try changing:
if (settings_menu_element.last(id === settings_list_last_element_id))
to
if (settings_menu_element.last().attr('id') === settings_list_last_element_id)
Edit:
if (settings_menu_element.last().attr('id') === settings_list_last_element_id){
return false;
} else {
renumNext();
}
Or even better:
if (settings_menu_element.last().attr('id') !== settings_list_last_element_id){
renumNext();
}
Your if-statement looks a bit odd. Try something like this instead:
carousel_controls_buttons.on('click', function(){
// Do nothing if last element has a certain id-attribute
if (settings_menu_element.last().attr("id") === 'r_00') {
return false;
}
renumNext();
});