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

Question

在以下代碼中，ng-click不會將'color'分配給'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/