AngularJS - ng-repeatのng-clickを実行していない

Question

次のコードでは、ng-clickは 'selected_color'に '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; 
} 

そして、これを使用します。あなたは、コントローラを使用するのではなくている場合http://jsfiddle.net/s6vrz184/1/

：フィドルを更新しました

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

を何らかの理由で関数$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/