在 ng-repeat 中点击 ng 后回到初始状态？

Question

由于我对基本 AngularJs 概念的理解很浅（我认为），我遇到了一个问题。我有一个可点击单词的列表。当我点击它们时，它们会通过使用 Bootstrap 'labels' 类改变颜色（单独）。它工作正常但是......（这里是:)）：如果我点击我的 'Try again' 按钮，我无法将我的颜色设置回初始状态，因为我无法将 '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>

编辑：对于初学者的错误，我们深表歉意。我接受了上面代码的版本（裸 HTML）。这也是我的 pickWord() function() :

$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 = [];
};

在 ng-repeat 中点击 ng 后回到初始状态？

Coming back to init state after ng-click in ng-repeat?

javascript

angularjs

ng-repeat