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>

有一些我没有得到的东西使代码无法完美运行，因为在选项卡上单击一次，所选的类名永远不会被删除。

Answer 1

当您想从 a 中修改父范围的变量时，ng-repeat您需要使用$parent.currentTab.

更新小提琴