एनजी-क्लिक और एनजी-शो गतिशील सामग्री (कोणीय)

Question

पर काम नहीं करते हैं क्यों एनजी-क्लिक और एनजी-शो गतिशील सामग्री पर काम नहीं करते हैं, जबकि यदि मैं स्थैतिक टैब स्विच करने का प्रयास करता हूं तो सब ठीक काम करता है? मुझे क्या करने की ज़रूरत है, इसलिए मैं ट्रफ प्रोफाइल टैब पर क्लिक कर सकता हूं? छोटे कोड पदचिह्न के साथ वांछित प्रभाव कैसे प्राप्त करें? मुझे आशा है कि आप लोग मेरी मदद कर सकते हैं।

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

Let उदाहरण के लिए कहते हैं कि मैं प्रोफाइल आपत्ति है:

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

अग्रिम धन्यवाद!

Answer 1

अपने एनजी-क्लिक निर्देश के लिए एक फ़ंक्शन सेट करें।

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

जावास्क्रिप्ट:

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