angularjs - タブ付きポップオーバーを管理するために選択/選択されていない ng-class を処理する方法

Question

私のコードは次のとおりです(フィドル):

<div ng-controller="myCtrl">
    <div ng-model="currentTab" ng-init="currentTab='Tab1'"/>
    <div ng-init="popovers = [  
        {   name: 'Popover1',   
            displayName: 'Pop over with two tabs',
            tabs: [
                {   name: 'Tab1',       
                    displayName: 'First tab',
                    description: ['First tab description']
                },
                {   name: 'Tab2',       
                    displayName: 'Second tab',
                    description: ['Second tab description']
                }
            ]
        }
    ]"/>

    <b>Tabs in popover</b>

    <div
        class="popover"
        ng-repeat="p in popovers" 
        >
        Popover name: {{p.displayName}}
        <div ng-repeat="t in p.tabs" 
            class="tab"
            ng-class="currentTab==t.name?'selected':''"
            ng-click="currentTab=t.name"
            >
                {{t.name}}
        </div>
        <div  ng-repeat="t in p.tabs" 
            class="tabContent" 
            ng-class="currentTab==t.name?'selected':''"
            >
            <p>{{t.displayName}}</p>
        </div>
    </div>
</div>

選択したクラス名がタブを1回クリックしても削除されないため、コードが完全に機能しない原因がわかりません。

Answer 1

親スコープの変数を 内から変更する場合は、ng-repeatを使用する必要があります$parent.currentTab。

更新されたフィドル