4

这是代码： 

<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 中唯一的一个变量。

更新：

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

在视图中只读；
在 Controller 中只写。
http://www.jacopretorius.net/2013/07/angularjs-best-practices.html

4

3 回答 3

4

我怎样才能使第二个列表中的 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

于 2013-10-03T07:25:10.977 回答
3

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

另一方面f_click，位于 的范围内MainCtrl，这是两个s的父范围。ng-repeat改变它的函数 ( fun_click) 也存在于父作用域中。ng-repeat作用域继承了这个变量的单个实例，因此是观察到的行为。

要使f_click工作像click您必须将其私有化到每次ng-repeat迭代的范围内一样。一种解决方案是在一个控制器里面定义f_click和。其他解决方案是可能的。fun_click() ng-repeat

于 2013-10-03T07:26:27.990 回答
3

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

因此，解决您的问题的一个简单方法是将f_click在 ngRepeat 中创建的实例传递给您的函数：

// 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

于 2013-10-03T07:28:21.440 回答