$ scope.variable in ng-repeat

Question

我不了解上述代码中的行为。

我有一个$scope.isCollapsed布尔值，用于ng-repeat-start - ng-repeat-stop块中。

据我了解，我希望两行同时折叠，因为isCollapsed在两种情况下都是相同的。 但是实际发生的是它们似乎是独立的。

是什么原因导致这种现象？

编码 ：

<tr ng-repeat-start="person in persons">
    <td>
        <a href="#" ng-click="isCollapsed = !isCollapsed">{{person.name}}</a>
    </td>
    <td>
        {{person.age}}
    </td>
</tr>
<tr collapse="isCollapsed" ng-repeat-end="">
    <td colspan="3">
        <h3>Details about {{person.name}}</h3>
        <p>Some details about {{person.name}}, {{person.age}}</p>
    </td>
</tr>

使用以下控制器：

var app = angular.module('personApp', ['ui.bootstrap']);
app.controller('personCtrl', function($scope) {
    $scope.isCollapsed = true;
    $scope.persons = [{ name: "John",
                        age: "40yrs" },
                      { name: "Kevin",
                        age: "50yrs" }];
});

Codepen： http ：//codepen.io/anon/pen/ojpaNR

Answer 1

ng-click="collapse()"

在控制器中

$scope.collapse=function(){
   $scope.isCollapsed=!$scope.isCollapsed;
}

给出预期的行为

why ?

因为当您尝试在html中更改isCollapsed时，它处于不同的作用域，但是当您通过上述函数方法进行操作时，它处于相同的作用域。

要测试这个，你可以尝试

ng-click="isCollapsed = !isCollapsed;test($index);"

并将测试定义为

 $scope.test=function(index){
            setTimeout(function(){
                console.log('test: '+index);
                console.log('$scope.isCollapsed: '+$scope.isCollapsed);
            },10)
        }

它将始终显示为真。

如果您想使用自己的方法，则将其作为

$rootScope.isCollapsed = true;

ng-click="$root.isCollapsed = !$root.isCollapsed;"

控制器和一些将元素添加到dom的指令会创建自己的作用域（ng-if，ng-switch，ng-repeat，ng-view等）。 您可以使用AngularJS Batarang chrome扩展程序来帮助调试它们。 值是继承的，但是在子作用域中设置值会破坏继承。

在Angular UI Router中的ng-click视图中，未更新Scope变量中的上述文本

Answer 2

没有指定何时折叠的第一个tr元素的属性。 与第二个<tr>元素一样，属性collapse="isCollapsed"将基于isCollapsed值折叠元素。