I am currently developing a small AngularJS application that utilizes Material Steppers for navigation.
In order to achieve a specific functionality, I need to ensure that items selected from two different sections of the page belong to category ID 1. The function should only return true if items from both sections meet this criteria.
The selection process in section A must trigger a change in the variable this.isTriggerB, but this change should occur only after selecting items from section A:
class Controller {
constructor($mdStepper) {
this.isTriggerA = false;
this.isTriggerB = false;
this.clickedStepNumber = 0;
getCurrentStep() {
this.steppers = this.$mdStepper('stepper');
const steps = this.steppers.steps;
steps.forEach((el, index) => {
let step = this.steppers.steps[index];
if (step.isClicked()) {
this.clickedStepNumber = step.stepNumber;
}
});
}
checkCategory() {
this.getCurrentStep();
if (this.filter.provider) {
let categoryID = parseInt(this.filter.category.id, 10);
console.log('Cid: ' + categoryID);
if (categoryID !== 1) {
this.isTestPassed = false;
} else {
if (parseInt(this.clickedStepNumber, 10 === 1)) {
this.isTriggerA = true;
console.log('Step: ' + this.clickedStepNumber);
console.log("A1: " + this.isTriggerA);
console.log("B1: " + this.isTriggerB);
}
if (parseInt(this.clickedStepNumber, 10 === 2)) {
this.isTriggerB = true;
console.log('Step: ' + this.clickedStepNumber);
console.log("A2: " + this.isTriggerA);
console.log("B2: " + this.isTriggerB);
}
if (this.isTriggerA === true && this.isTriggerB === true) {
this.isTestPassed = true;
} else {
this.isTestPassed = false;
}
}
}
}
}
The execution flow should handle the two cases (steps) separately without entering into unwanted conditions.
Can you help me identify any errors in my approach?