AngularJS:ng-repeat中的变量，没有$scope在其局部范围内

这是代码：

<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 重复元素的局部变量？
它是如何工作的？

如何使第二个列表中的f_click像click一样工作？
似乎$scope.f_click是ng控制器中唯一的变量。

更新：

我想我只是做错了事情。
我不应该在"视图"中写东西。

在视图中只读;
在控制器中只写。
http://www.jacopretorius.net/2013/07/angularjs-best-practices.html

如何使第二个列表中的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>

见普伦克

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

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

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

第一个ngRepeat有效而第二个无效的原因是ngRepeat为每个项目创建了一个范围。换句话说，items中的每个项目都有一个click变量的实例，通过在ngClick中切换click变量，您实际上是在使用私有实例。在第二个示例中，使用控制器（ngRepeat 作用域的父级）$scope访问f_click，因此更改将传播到所有子作用域。

因此，问题的简单解决方案是在 ngRepeat 中创建的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

相关内容

最新更新

热门标签：