I'm currently facing a challenge, mainly due to my lack of understanding in basic AngularJs concepts. The issue arises when I interact with a list of clickable words. When I click on any of these words, their color changes individually thanks to the implementation of Bootstrap's 'labels' classes. Everything seems to work fine up until this point... However, there is one problem that I encounter when clicking on the 'Try again' button - I am unable to revert the colors back to their initial state because I cannot set the value of 'this.selected' to 'false'. Please refer to the code snippet below for clarification.
Although I acknowledge that this problem may not be too complicated, I find myself stuck and would greatly appreciate any guidance or hints from anyone who can assist me.
<h2 class="jumbleW inline" ng-repeat="w in word track by $index">
<span ng-class="{'label': true, 'label-primary': !this.selected, 'label-warning': this.selected}" ng-click="pickWord(w)">{{w}}</span>
</h2>
<button class="btn btn-danger btn-xs" ng-click="clear()">Try again</button>
EDIT : Please excuse any beginner mistakes that I may have made. For clarity purposes, let's consider the revised version of the provided code (which consists only of HTML). Additionally, here is my pickWord() function:
$scope.pickWord = function(w){
this.selected = !this.selected;
if (this.selected == false) {
$scope.playerAnswer = $scope.playerAnswer.replace(w, "");
} else {
$scope.playerAnswer += w;
}
}