Question

在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中的输出是： -----------------------在collapseProcess中-------------- -1 0 -----------------------在collapseProcess中-------------- -1 1 -----------------------在collapseProcess中-------------- -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更多的过程。

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

Answer 1

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

我想出了问题，似乎ng-repeat创建了自己的范围，这就是为什么它不起作用。

如果我将代码更改为：

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

并在HTML中引用obj.selectedProcess。那会有用。所以我猜这是由ng-repeat创建的范围引起的。对？

为什么angular JS的行为有所不同？

1 个答案: