无法在 AngularJS 的选项卡结构上创建 ngShow 或 ngHide 效果？

Question

在下面的示例中，我想在选择 A 选项卡时显示 A 指令，在选择 B 时显示 B。我尝试了 ng-show、ng-hide 但没有得到结果。谁能帮我解决这个问题？

谢谢。

HTML:

<ul class="nav nav-tabs">
   <li ng-class="tabClass(tab)" ng-repeat="tab in tabs" tab="tab">
     <a href="{{tab.link}}" ng-click="setSelectedTab(tab)">
      {{tab.label}}    
     </a>
   </li>
</ul>

<A></A>

<B></B>

JS:

app.controller('myCtrl', ['$scope', '$location', '$routeParams', function ($scope, $location, $routeParams) {
    var tabNdx = 0;
    $scope.tabs = [
        {
            id: 'A',
            link: '#/s/A',
            label: 'A'
        },
        {
            id: 'B',
            link: '#/s/B',
            label: 'B'
        }
    ];

    if ($routeParams.subtab) {
        angular.forEach($scope.tabs, function (tab, i) {
            if ($routeParams.subtab === tab.id) {
                tabNdx = i;
            }
        });
    }
    $scope.selectedTab = $scope.tabs[tabNdx];
    $scope.setSelectedTab = function (tab) {
        $scope.selectedTab = tab;
    };
    $scope.tabClass = function (tab) {
        if ($scope.selectedTab === tab) {
            return "active";
        } else {
            return "";
        }
    };
}]);

Answer 1

<A ng-show="selectedTab.label == 'A'"></A>

<B ng-show="selectedTab.label == 'B'"></B>

无法在 AngularJS 的选项卡结构上创建 ngShow 或 ngHide 效果？

Unable to create ngShow or ngHide effects on my tab structure of AngularJS?

tabs

angularjs

ng-show

ng-hide