액티브 탭의 색인 가져 오기

Question

js 쪽에서 활성 탭의 색인을 가져오고 싶습니다. 그러나 어떻게 할 것인지 잘 모르겠지만, 나는 모든 것을 시도했지만, 모두 '정의되지 않았 음'또는 악화되었습니다. 빈 페이지.

HTML :

<uib-tabset> 
    <uib-tab ng-repeat="item in tabs" active="item.active" TabIndex="{{item.id}}" heading="{{item.name}}"></uib-tab> 
</uib-tabset> 

JS : 여기

Category.findAll().$promise.then(function (result) { 
     $scope.tabs = result; 
    }); 

이 스크린 샷입니다 페이지 점심 후 탭을 표시하려면

여기

내 코드입니다

내 js 측에서 onchange뿐만 아니라 페이지가로드 될 때도 4 또는 3 (TabIndex = "{item.id}}") 색인을 가져오고 싶습니다.

누군가가 나를 도울 수 있기를 바랍니다.

영어로 죄송합니다. 제 모국어가 아닙니다.

Answer 1

컨트롤러 내부의 기능입니다 탭 변경 이벤트 수신 대기 :

Category.findAll().$promise.then(function(result) { 
    $scope.tabs = result; 
    $scope.activeTab = 1; //set 2nd tab 

    $scope.$watch('activeTab', function(newVal) { 
     console.log(newVal); //listen to tab change events 
    }); 

}); 

필요한 경우 fiddle을 참조하십시오.

Answer 2

select() - 탭이 활성화 될 때 호출되는 선택적 표현식입니다. 표현을 위해 템플릿에서 $ event를 지원합니다. 당신이 탭을 선택하거나 할 수

<uib-tabset active="activeTab"> 
    <uib-tab ng-repeat="item in tabs" active="item.active" TabIndex="{{item.id}}" heading="{{item.name}}" select="alertMe($event, $index)></uib-tab> 
</uib-tabset> 

및 컨트롤러에서 :

<uib-tabset> 
    <uib-tab ng-repeat="item in tabs" active="item.active" TabIndex="{{item.id}}" heading="{{item.name}}" select="alertMe($event, $index)></uib-tab> 
</uib-tabset> 

alertMe

당신은 uib-tabset 구성 요소의 active 속성에 범위 변수를 바인딩 할 수 있습니다

$scope.alertMe = function(e, index) { 
    console.log(e, index) 
};