根据条件在 ng-repeat 内的 HTML 元素上应用 CSS 类

Question

我正在尝试根据active变量使 HTML 标题处于活动/非活动状态。但要active在单击标题时设置标志，我使用指令$index变量ng-repeat：

<div ng-init="active = 1">
  <h4 ng-repeat="(key, val) in vm.headings" ng-click="active = $index" ng-class="{'active': active === $index}">
{{key}}
</h4>
</div>

标题对象：

vm.headings = {
    "HEADING_1": "CONTENT",
    "HEADING_2": "CONTENT",
    "HEADING_3": "CONTENT"
};

第一次加载时，其中一个标题按设置显示为“活动”。但在随后的点击中，它没有给出预期的结果。单击它们后，所有标题都会变为活动状态。这是小提琴。

Answer 1

尝试这个：

<h4 ng-repeat="(key, val) in vm.headings" ng-click="selectH($index)" ng-class="{'active': active === $index}">

在控制器中：

$scope.selectH= function(index) {
   $scope.active = index; 
};

希望这会起作用。