更改控制器中 ng-repeat 中定义的变量的状态

Question

我想知道是否可以从控制器更改 ng-repeat 中定义的变量的值？

我正在尝试初始化一个简单的变量 "opened"，用于在控制器内部的 ng-repeat 中切换。

<div ng-repeat="item in list">
    <input type="checkbox" ng-model="active[$index]" ng-click="active[$index]?opened=true:''" />
    <a href ng-click="opened=!opened"><span class="glyphicon" ng-class="opened ? 'glyphicon-triangle-bottom' : 'glyphicon-triangle-right'"></span></a>
{{item.title}}  
    <span ng-show="opened">{{item.title}}</span>    
</div>

这里有一个 plunker 展示了一个例子。 http://plnkr.co/edit/lebA2dokhq2W4AsbjKWB?p=preview

谢谢，

Answer 1

简单的回答是否定的，因为您的控制器无权访问该范围。

您可以从控制器访问的 $scope 对象是您的 "root" 范围。像 ng-repeat 这样的指令创建了它们自己的子作用域，"inherit" 它们的祖先，这意味着它们可以访问它们的变量。父作用域无法访问子作用域。

不过，有一个技巧。

你必须在你的根范围（在你的控制器上）定义你的变量，然后你可以在你的 ng-repeat 范围内定义新的属性。

像这样：

<div ng-repeat="item in list">
    <input type="checkbox" ng-model="active[$index]" ng-click="active[$index]?opened=true:''" />
    <a href ng-click="option.opened=!option.opened"><span class="glyphicon" ng-class="option.opened ? 'glyphicon-triangle-bottom' : 'glyphicon-triangle-right'"></span></a>
    {{item.title}}  
    <span ng-show="option.opened">{{item.title}}</span>    
</div>

在您的控制器中，确保创建此对象： $scope.options = {}

Answer 2

我就是这样解决的：

在 js 控制器上声明：

$scope.opened = [];

在 html 中的项目上：

ng-click="opened[$index].valor = (rotateImg[$index] = !rotateImg[$index])"

并且在 img class 上：

ng-class="opened[$index].valor ? 'rotate': ''"

CSS是：

.rotate {
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

更改控制器中 ng-repeat 中定义的变量的状态

Change state of variable defined in ng-repeat in controller

javascript

angularjs

toggle

angularjs-ng-repeat