javascript AngularJS：ng-repeat 中没有 $scope 的变量是否在其本地范围内？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19152956/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS: variable in ng-repeat without $scope is in its local scope?
提问by zx1986
here is the code:
这是代码：
<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_clickchange in fun_clickfunction.
f_clickfun_click功能的改变。
$scope.fun_click = (idx) ->
$scope.f_click = !$scope.f_click
the complete codes: http://plnkr.co/edit/Zmoqbv?p=preview
完整代码：http: //plnkr.co/edit/Zmoqbv?p=preview
I wonder that the variable clickin the first list is a local variable for each ng-repeat element ?
how was it work ?
我想知道click第一个列表中的变量是每个 ng-repeat 元素的局部变量吗？
它是如何工作的？
How could I make the f_clickin the second list works like the click?
Seems the $scope.f_clickis the only one variable in the ng-controller.
我怎样才能使f_click第二个列表中的 像 一样工作click？
似乎$scope.f_click是 ng-controller 中唯一的一个变量。
Updated:
更新：
I think I just did things wrong.
I should not write things in "View".
我想我只是做错了事。
我不应该在“视图”中写东西。
read-only in View;
write-only in Controller.
http://www.jacopretorius.net/2013/07/angularjs-best-practices.html
在视图中只读；
在控制器中只写。
http://www.jacopretorius.net/2013/07/angularjs-best-practices.html
采纳答案by Maxim Shoustin
How could I make the f_click in the second list works like the click
我怎么能让第二个列表中的 f_click 像点击一样工作
As I know you can't. From your 1st example clickdoesn't refer to any scope.
据我所知，你不能。从您的第一个示例click中，没有涉及任何范围。
f_clickrefers to specific scope and any change distributes on all elements (aka on all items in your loop)
f_click指的是特定范围，任何更改都分布在所有元素上（也就是循环中的所有项目）
You can provide flag per value like:
您可以为每个值提供标志，例如：
$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
HTML
<ul>
<li ng-repeat="j in items2" ng-class="{'red': j.value}">
<span ng-click="fun_click(j)">{{j.name}}</span>
</li>
</ul>
See Plunker
看 Plunker
回答by Nikos Paraskevopoulos
ng-repeatcreates a scope for each iteration. The clickvariable lives inside each ng-repeatscope, in other words it is private to that. If you place {{click}}just after the <body ng-controller="MainCtrl">but before the ng-repeat, it will show nothing because clickexists in the inner scope(s).
ng-repeat为每次迭代创建一个范围。在click每个内部变量的生活ng-repeat范围，换句话说，它是专用于这一点。如果您放置{{click}}在 之后<body ng-controller="MainCtrl">但之前ng-repeat，它将不会显示任何内容，因为click存在于内部范围中。
On the other hand f_clicklives in the scope of the MainCtrl, which is the parentscope for both ng-repeats. The function that changes it (fun_click) lives in the parent scope too. The ng-repeatscopes inherit the single instanceof this variable, thus the observed behaviour.
另一方面，f_click存在于 的范围内MainCtrl，这是两个s的父范围ng-repeat。改变它的函数 ( fun_click) 也存在于父作用域中。所述ng-repeat作用域继承单个实例这个变量的，因此，观察到的行为。
To make f_clickwork as clickyou would have to make it private to the scope of each ng-repeatiteration. One solution is to define f_clickand fun_click()in a controller insideng-repeat. Other solutions are possible.
为了使f_click工作正常，click您必须将其私有化到每次ng-repeat迭代的范围内。一种解决方案是定义f_click并fun_click()在一个控制器里面ng-repeat。其他解决方案也是可能的。
回答by marcoseu
The reason first ngRepeat works and the second one doesn't is because ngRepeat create a scope for each item. In other words, there is a instances of clickvariable for each item in itemsand by toggling the clickvariable inside a ngClick you are in effect working with the private instance. In the second example, you access the f_clickusing $scopeof the controller, which is the parent of ngRepeat scope, and therefore changes are propagated to all children scopes.
第一个 ngRepeat 有效而第二个无效的原因是因为 ngRepeat 为每个项目创建了一个范围。换句话说，click每个项目都有一个变量实例，items通过click在 ngClick 中切换变量，您实际上是在使用私有实例。在第二个示例中，您访问控制器的f_clickusing $scope，它是 ngRepeat 作用域的父级，因此更改会传播到所有子作用域。
A simple solution to your problem is therefore pass the f_clickinstance created in ngRepeat to your function:
因此，解决您的问题的一个简单方法是将f_click在 ngRepeat 中创建的实例传递给您的函数：
// Script
$scope.fun_click = (toggle) ->
return !toggle
// HTML
<span ng-click="f_click=fun_click(f_click)">{{j}}</span>
If you wish to maintain the state in $scope, you can use a dictionary to track the status of each $index:
如果您希望保持 中的状态$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>
Here is updated plunker: http://plnkr.co/edit/w6RLed?p=preview
这是更新的 plunker：http://plnkr.co/edit/w6RLed?p=preview
