为什么 Ng-click 和 ng-show 对动态内容不起作用，而如果我尝试切换静态选项卡一切正常？我需要做什么，才能单击 profiles 选项卡？如何以最小的代码占用空间达到预期的效果？我希望你们能帮助我。

<div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                <li class="active"><a ng-click="tab=1" data-toggle="tab" aria-expanded="true" style="cursor: pointer;">Subscriber</a></li>
                <li class=""><a ng-click="tab=2" data-toggle="tab" aria-expanded="true" style="cursor: pointer;">Devices</a></li>
                <li class="" ng-repeat="p in profiles"><a ng-click="tab=p.uid" data-toggle="tab" aria-expanded="true" style="cursor: pointer;">{{p.name}}</a></li>
            </ul>

            <div class="tab-content">
                <!-- subscriber tab -->
                <div class="tab-pane active" ng-show="tab==1" ng-init="tab=1">
                    <div class="row">
                        <div class="col-xs-12">
                            sssssssssssssssssssssssssssssssss
                        </div>
                    </div>
                </div>
                <!-- subscriber tab -->

                <!-- devices tab -->
                <div class="tab-pane active" ng-show="tab==2">
                    <div class="row">
                        <div class="col-xs-12">
                                dddddddddddddddddddddddddd
                        </div><!-- /.row -->
                    </div><!-- /.tab-pane -->
                </div><!-- /.tab-pane -->
                <!-- devices tab -->

                <!-- profiles tab -->
                <div class="tab-pane active" ng-repeat="p in profiles" ng-show="tab==p.uid">
                    <div class="row">
                        <div class="col-xs-12">
                            ppppppppppppppppp
                        </div><!-- /.row -->
                    </div><!-- /.tab-pane -->
                </div><!-- /.tab-pane -->
                <!-- profiles tab -->
            </div><!-- /.tab-content -->
</div>

例如，假设我有配置文件对象:

$scope.profiles=[
    {
        "Name" : "Jhonny",
        "uid" : "00000"
    },
    {
        "Name" : "Ken",
        "uid" : "00001"
    },
    {
        "Name" : "Zelda",
        "uid" : "00002"
    }]

提前致谢!

最佳答案

为您的 ng-click 指令设置一个函数。

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
     <div class="nav-tabs-custom">
                <ul class="nav nav-tabs">

                    <li class="" ng-repeat="p in pies"><a ng-click="setTab(p)" >{{p.name}}</a></li>
                </ul>

                <div class="tab-content">

                    <!-- profiles tab -->
                    <div class="tab-pane active" ng-repeat="p in pies" ng-show="tab==p.id">
                        <div class="row">
                            <div class="col-xs-12">
                                {{p.name}}
                            </div><!-- /.row -->
                        </div><!-- /.tab-pane -->
                    </div><!-- /.tab-pane -->
                    <!-- profiles tab -->
                </div><!-- /.tab-content -->
    </div>
    </div>
    </div>
</div>

Javascript:

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.tab = 1;
    $scope.setTab = function(p){
        $scope.tab = p.id;
    }
    $scope. pies = [
        {name:"kakaolu",id:1},
        {name:"kestane",id:2},
        {name:"fisne",id:3},
    ];
}

Jsfiddle

关于javascript - ng-click 和 ng-show 不适用于动态内容( Angular )，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33605937/