ng-repeatでng-clickした後にinit状態に戻りますか？

Question

AngularJsの基本的な概念の理解が非常に低いため、問題に直面しています（私は思っています）。私はクリック可能な単語のリストを持っています。私がそれらをクリックすると、ブートストラップの「ラベル」クラスを使用して色が（個別に）変更されます。それはうまく動作しますが...（ここは:) :)：私は '私は' 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）の版を受け入れました。

$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を使用しないでください： はここにも私のpickWord（）関数（）です。その代わりに、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 = []; 
};