<!-- This button only shows when is selected/null -->
<a ng-if="$ctrl.selectedIndex === $index || $ctrl.selectedIndex === null"
data-ng-click="$ctrl.ChooseSolution($index, product)"
class="dq_btn dq_mr dq_ml">
{{product.ButtonText}}
</a>
<script>
this.isSelected = false;
this.selectedIndex = null;
function ChooseSolution(index: any): void {
let isSelected = this.isSelected = !this.isSelected; // true/false
// set all 'isBtnActive' property to false - as default
this.Model.Solution.forEach(function (value: any) {
value.isBtnActive = false;
});
// set selected 'isBtnActive' property to true
this.Model.Solution[index].isBtnActive = isSelected;
// Option 1: ternary operator
// this.selectedIndex = isSelected ? index : null
// check if isSelected is set to either true/false
if (isSelected) {
// set 'selectedIndex' to the current index selected
this.selectedIndex = index;
} else {
// reset 'selectedIndex' back to null
this.selectedIndex = null;
}
}
</script>