javascript - AngularJS - ng-click 中的 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 的新变量并进行设置。

在 Controller 上创建一个方法并调用它:

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

并使用这个:

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

更新的 fiddle :http://jsfiddle.net/s6vrz184/1/

如果您出于某种原因反对使用 Controller 函数，您可以通过 $parent 内联设置 selected_color 变量，但不建议这样做:

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

$parent fiddle :http://jsfiddle.net/s6vrz184/2/