Ng-click và ng-show không hoạt động trên nội dung động (góc)

Question

Tại sao Ng-click và ng-show không hoạt động trên nội dung động, trong khi nếu tôi cố gắng chuyển các tab tĩnh, mọi thứ hoạt động tốt? Tôi cần phải làm gì, vì vậy tôi có thể nhấp vào tab hồ sơ máng? Làm thế nào để đạt được hiệu quả mong muốn với dấu chân mã nhỏ nhất? Tôi hị vọng các bạn có thể giúp tôi.

<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> 

Hãy nói ví dụ mà tôi có phản đối hồ sơ:

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

Cảm ơn bạn trước!

Answer 1

Đặt chức năng cho chỉ thị ng-click của bạn.

<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