AngularJS：没有$ scope的ng-repeat中的变量在其本地范围内？

Question

这是代码：

<ul>
  <li ng-repeat="i in items" ng-class="{'red': click}">
    <span ng-click="click = !click">{{i}}</span>
  </li>
</ul>

<ul>
  <li ng-repeat="j in items" ng-class="{'red': f_click}">
    <span ng-click="fun_click($index)">{{j}}</span>
  </li>
</ul>

f_click改变fun_click函数。

$scope.fun_click = (idx) ->
    $scope.f_click = !$scope.f_click

完整的代码： http ： //plnkr.co/edit/Zmoqbv？p = preview

我想知道第一个列表中的变量click是每个ng-repeat元素的局部变量吗？
它是如何工作的？

我怎么能让第二个列表中的f_click像click一样工作？
似乎$scope.f_click是ng-controller中唯一的一个变量。

更新：

我想我做错了。
我不应该在“视图”中写东西。

在View中只读;
只读在Controller中。
http://www.jacopretorius.net/2013/07/angularjs-best-practices.html

Answer 1

如何让第二个列表中的f_click像点击一样工作

据我所知你不能。 从您的第一个示例click不引用任何范围。

f_click指的是特定范围，任何更改都会分布在所有元素上（也就是循环中的所有项目）

您可以为每个值提供标记，如：

$scope.items2 = [
{'name': 'Google','value':false},
{'name': 'Apple','value':false},
{'name': 'Yahoo','value':false},
{'name': 'IBM','value':false},
];

 $scope.fun_click = (item) ->
   item.value = !item.value;

HTML

 <ul>
  <li ng-repeat="j in items2" ng-class="{'red': j.value}">
    <span ng-click="fun_click(j)">{{j.name}}</span>
  </li>
</ul>

见Plunker

Answer 2

ng-repeat为每次迭代创建一个范围。 click变量存在于每个ng-repeat范围内，换句话说，它是私有的。 如果您在<body ng-controller="MainCtrl">但在ng-repeat之前放置{{click}} ，它将不会显示任何内容，因为内部作用域中存在click 。

另一方面， f_click存在于MainCtrl的范围内， MainCtrl是两个ng-repeat的父范围。 更改它的功能（ fun_click ）也存在于父作用域中。 ng-repeat范围继承此变量的单个实例 ，从而继承观察到的行为。

要使f_click作为click工作，您必须将其设置为每个ng-repeat迭代范围的私有。 一种解决方案是在 ng-repeat 内的控制器中定义f_click和fun_click() 。 其他解决方案也是可能

Answer 3

首先ngRepeat工作的原因和第二个不工作的原因是因为ngRepeat为每个项目创建了一个范围。 换句话说，存在的情况下， click在每个项目变量items ，并通过切换click变量ngClick里面你实际上是与私有实例工作。 在第二个示例中，您使用控制器的$scope访问f_click ，该控制器是ngRepeat范围的父级，因此更改将传播到所有子范围。

因此，对您的问题的简单解决方案是将在f_click创建的f_click实例传递给您的函数：

// Script
$scope.fun_click = (toggle) ->
    return !toggle

// HTML
<span ng-click="f_click=fun_click(f_click)">{{j}}</span>

如果您希望在$scope维护状态，可以使用字典来跟踪每个$index的状态：

// Script
$scope.form_status = {}
$scope.fun_click = (index) ->
    $scope.form_status[index] = !$scope.form_status[index]

// HTML
<li ng-repeat="j in items" ng-class="{'red': form_status[$index]}">
    <span ng-click="fun_click($index)">{{j}}</span>
</li>

这里有更新的plunker： http ：//plnkr.co/edit/w6RLed？p = preview

AngularJS：没有$ scope的ng-repeat中的变量在其本地范围内？

问题描述

3 个解决方案

解决方案1
4 已采纳 2013-10-03 07:25:10

解决方案2
3 2013-10-03 07:26:27

解决方案3
3 2013-10-03 07:28:21

AngularJS：没有$ scope的ng-repeat中的变量在其本地范围内？

问题描述

3 个解决方案

解决方案1 4 已采纳 2013-10-03 07:25:10

解决方案2 3 2013-10-03 07:26:27

解决方案3 3 2013-10-03 07:28:21

解决方案1
4 已采纳 2013-10-03 07:25:10

解决方案2
3 2013-10-03 07:26:27

解决方案3
3 2013-10-03 07:28:21