AngularJS-在ng-repeat中執行ng單擊不執行

Question

在以下代碼中，ng-click不會將“顏色”分配給“ selected_color” ...這是為什么？

<div ng-app>
 <div ng-controller="xCtrl">
  <div ng-repeat="color in colors" ng-click="selected_color=color" style="cursor:pointer;">{{ $index }} - {{ color }}</div>
  <hr>
  Selected Color: {{ selected_color }}
 </div>
</div>

示例： http ： //jsfiddle.net/s6vrz184/

Answer 1

確實如此，只是不是您的想法。 ngRepeat創建自己的子范圍，因此，實質上，每次單擊時，您都將在該子范圍上創建一個名為selected_color的新變量並對其進行設置。

在控制器上創建一個方法，然后調用該方法：

$scope.setColor = function(color) {
    $scope.selected_color = color;
}

並使用：

<div ng-repeat="color in colors" ng-click="setColor(color)" style="cursor:pointer;">{{ $index }} - {{ color }}</div>

更新的小提琴： http : //jsfiddle.net/s6vrz184/1/

如果由於某種原因而反對使用控制器功能，則可以$parent內聯設置selected_color變量，但是不建議這樣做：

<div ng-repeat="color in colors" ng-click="$parent.selected_color=color" style="cursor:pointer;">{{ $index }} - {{ color }}</div>

$parent小提琴： http : //jsfiddle.net/s6vrz184/2/