AngularJS: ngClass 未在 ngClick 上更新

Question

我有一个 ngRepeat 函数来打印一些 divs 其中第一个有 active class 默认和 div点击我想设置 div 已点击 active 其他点击 inactive class 我有下一个代码，但我不知道为什么不起作用。

在我的控制器中

$scope.activeSection = 0;

我认为

<div ng-repeat="div in divs" ng-class="activeSection == $index ? 'active' : 'inactive'" ng-click="activeSection = $index">
    <p>Lorem......</p>
</div>

这里的问题是当我点击时，点击的 div 变为活动状态但没有将最后激活的 div 更改为 不活动 并保持活跃 class 代替。

希望你能帮助我。

Answer 1

原因是，ngRepeat 将创建自己的 $scope - 所以您实际上并没有更新您认为的 activeSection - 您正在创建另一个名为 activeSection 在 ngRepeat 作用域（子）上。解决此问题的一种方法是使用 $parent（丑陋） - 或者只是调用控制器上的函数以确保达到正确的 $scope：

$scope.setActive = function(index) {
    $scope.activeSection = index;
}

查看：

<div ng-repeat="div in divs" ng-class="activeSection == $index ? 'active' : 'inactive'" ng-click="setActive($index)">
    <p>Lorem......</p>
</div>

一定要阅读这篇关于 $scope 和继承的 post：What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

Answer 2

ng-repeat 定义了它自己的范围。所以当 activeSection = $index 时，ng-repeat 的 activeSection 变量设置了什么。不是控制器的 activeSection 变量。

解决问题，在controller范围内定义一个对象：

$scope.sectionModel = {}

并在视图中使用

ng-class="sectionModel.activeSection == $index ? 'active' : 'inactive'" ng-click="sectionModel.activeSection = $index"

或者在控制器范围内使用一个函数来改变activeSection的值。

顺便说一句，我不会保存活动部分的 index，而是保存活动部分本身。这确保您的 ng-repeat 即使使用更改部分顺序的过滤器也能正常工作：

$scope.activeSection = null; // or $scope.div[0] for example
$scope.setActiveSection = function(section) {
    $scope.activeSection = section;
}

<div ng-repeat="div in divs | orderBy:'title'" ng-class="activeSection === div ? 'active' : 'inactive'" ng-click="setActiveSection(div)">
    <p>Lorem......</p>
</div>

AngularJS: ngClass 未在 ngClick 上更新

AngularJS: ngClass not updating on ngClick

angularjs

angularjs-ng-click

ng-class