为什么 Angular JS 的行为不同？答案

【问题标题】：Why angular JS behave differently?为什么 Angular JS 的行为不同？
【发布时间】：2015-06-04 11:07:50
【问题描述】：

在 Angular JS 控制器中，我们将一个列表放入 $scope 中，如下所示：

$scope.processes = ['process-aa','process-bb', 'process-cc']; 
$scope.selectedProcess=-1;
$scope.collapseProcess = function(index)
{
     console.log('-----------------------in collapseProcess--------------  %s, %s', $scope.selectedProcess, index  );
     return $scope.selectedProcess != index;

 };

 $scope.switchCollapse = function(index) 
 {
     $scope.selectedProcess = index;
 }

页面将列出所有这些进程，每个进程内部都有一个 div，我们将这个 div 设置为切换。在任何时候，只允许扩展一个 div。 HTML如下：

<li ng-repeat="process in processes" class="resultItem" 
   ng-click="switchCollapse($index)"> 
   <div collapse="collapseProcess($index)"  class="collapseBlock"> </div>
</li>

上面的代码完全符合我的预期。当我选择第一个进程时，内部的DIV会被展开，如果我再选择第二个进程，第一个进程的div会被折叠，第二个进程的div会被展开。

但是，我不明白的是为什么如果我将代码更改为：

<li ng-repeat="process in processes" class="resultItem" 
   ng-click="selectedProcess=$index"> 
   <div collapse="toggleProcess($index)"  class="collapseBlock"> </div>
</li>

如果我像上面那样更改代码，那么当我点击任何进程时，DIV 将不会被展开。函数 collapseProcess 的输出是： -----------------------在崩溃过程中-------------- -1 0 ------------------------incollapseProcess-------------- -1 1 ------------------------incollapseProcess-------------- -1 2

selectedProcess 将始终为 -1（这是控制器中的初始值）。这很奇怪，我不明白为什么会这样？

更有趣的是，如果我将 html 更改为：

<li ng-repeat="process in processes" class="resultItem" 
   ng-click="selectedProcess=$index"> 
   <div collapse="$scope.selectedProcess != index"  class="collapseBlock">    </div>
</li>

然后，如果我选择一个特定的进程，它的内部div会被展开，但是原来选择的进程展开的DIV不会被折叠，所以，如果我选择越来越多的进程，就会展开越来越多的DIV .

由于我是 Angular JS 的新手，我并不完全理解我的代码块之间的区别。有人可以帮忙吗？提前非常感谢。

【问题讨论】：

在最后一个例子中试试这个 "$scope.selectedProcess != $index", $ is missing in index

标签： javascript angularjs

【解决方案1】：

感谢您的回复。我在打字时错过了 $。实际代码确实有 $index。

我发现了这个问题，似乎 ng-repeat 创建了自己的范围，这就是它不起作用的原因。

如果我将代码更改为：

 $scope.obj={
    selectedProcess: -1
 };

并参考 HTML 中的 obj.selectedProcess。那么它会起作用。所以我猜这是由 ng-repeat 创建的范围引起的。正确的？

【讨论】：