Ng-click和ng-show不适用于动态内容(角度)

Question

为什么Ng-click和ng-show不适用于动态内容,而如果我尝试切换静态标签,一切正常？我需要做什么,所以我可以点击通过配置文件标签？如何以最小的代码占用空间实现预期的效果？我希望你们能帮助我.

<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"
    }]

先感谢您!

Answer 1

为您的 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},
    ];
}

杰斯小提琴