Next to the question I have linked here, I am exploring a different approach.
As a beginner in AngularJS/Cordova/Ionic, my goal is to achieve different outcomes when the "Eingepasst" button is clicked, each with unique logic compared to "Gewonnen" or "Verloren" (see screenshot).
Starting with a simple method, I aim to set the "Eingepasst" button as active while changing the 'adjustedYesNo' variable to 'true'.
This is the code snippet from the HTML file:
<div class="padding">
<div class="button-bar">
<button ng-click="round.won=true" ng-class="{'active':round.won == true}" class="button button-outline">Gewonnen</button>
<button ng-click="round.won=false" ng-class="{'active':round.won == false}" class="button button-outline">Verloren</button>
<button ng-click="adjusted()" ng-class="{'active':adjusted.adjustedYesNo() == true}" class="button button-outline">Eingepasst</button>
</div>
</div>
Here is a snippet of the controller.js file:
$scope.adjusted = function (adjustedYesNo)
{
console.log("adjusted before: ", adjustedYesNo);
var adjustedYesNo = false;
console.log("adjusted afterwards: ", adjustedYesNo);
return adjustedYesNo;
}
And here is the relevant CSS portion:
.button {
border-radius: 10px;
&.button-light {
color: $ci-green;
}
&.button-outline {
@include regular;
color: $ci-white;
border-color: $ci-white;
&.activated {
background-color: rgba($ci-white, .1);
border-color: $ci-white;
}
&.active {
border-color: $ci-white;
background-color: $ci-white;
color: $ci-green;
}
}
What specific changes do I need to make for the value 'adjustedYesNo' to be 'true' when entering the function (currently 'adjustedYesNo' is undefined), and why isn't the "Eingepasst" button changing to white after being clicked?
https://i.sstatic.net/HDcom.png https://i.sstatic.net/vzvZ1.png