条件に基づいてng-repeat内のHTML要素にCSSクラスを適用

Question

active変数に基づいてHTML見出しをアクティブ/非アクティブにしようとしています。

<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> 

見出しオブジェクト：：しかし、私はng-repeatディレクティブの$index変数使用しています見出しをクリックすることでactiveフラグを設定する

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

最初のロードでは、見出しの一つは、「active`に表示されますセットとして。しかし、その後のクリックでは、望ましい結果が得られません。すべての見出しは、クリックするとアクティブになります。コントローラで

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

：Here is the fiddle.

Answer 1

はこれを試してみてください

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

が、これは動作します願っています。