Возврат в состояние init после ng-click в ng-repeat?

Question

Я столкнулся с проблемой из-за моего очень низкого понимания основных концепций AngularJs (я думаю). У меня есть список кликабельных слов. Когда я нажимаю на них, они меняют цвет (индивидуально) с помощью классов меток Bootstrap. Он отлично работает, но ... (здесь это :)): Если я нажму кнопку «Попробовать еще раз», я не могу вернуть цвета в состояние init, потому что я не могу установить 'this.selected' в ' false "... См. приведенный ниже код.

Я уверен, что это не так сложно, но я застрял так, чтобы кто-нибудь мог дать мне подсказку, я был бы признателен.

<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: Извините за ошибки моего новичка. Я принял выпуск вышеуказанного кода (голый HTML). Вот и мой pickWord() функция():

$scope.pickWord = function(w){ 
    this.selected = !this.selected; 
    if (this.selected == false) { 
     $scope.playerAnswer = $scope.playerAnswer.replace(w, ""); 
    } else { 
     $scope.playerAnswer += w; 
    } 
} 

Answer 1

Не используйте this. Вместо этого добавьте свойство к объекту ng-repeat w, если его объект в противном случае создает массив для выбранного индекса, как показано ниже.

html

<h2 class="jumbleW inline" ng-repeat="w in word track by $index"> 
     <span ng-class="{'label': true, 'label-primary': selectedItems.indexOf($index) === -1, 'label-warning': selectedItems.indexOf($index) !== -1}" ng-click="pickWord(w, $index)">{{w}}</span> 
    </h2> 

<button class="btn btn-danger btn-xs" ng-click="clear()">Try again</button> 

JS

$scope.pickWord = function(w, i){ 
    if(!$scope.selectedItems){ 
     $scope.selectedItems = []; 
    } 

    var index = $scope.selectedItems.indexOf(i); 

    if(index === -1) { // not selected already and add 
     $scope.selectedItems.push(i); 
     $scope.playerAnswer += w; 
    } else { // selected already and remove 
     $scope.selectedItems.splice(index, 1); 
     $scope.playerAnswer = $scope.playerAnswer.replace(w, ""); 
    } 
} 

$scope.clear = function(){ 
    $scope.selectedItems = []; 
};