2016-09-13 3 views
4

두 개의 각도 UI 탭이있는 웹 페이지가 있습니다. 이 페이지에 새 버튼을 추가하고이 버튼 클릭 동작을 추가하고 싶습니다. 버튼을 클릭하면 탭을 다른 탭으로 스왑합니다. 예를 들어각도 UI 탭 - 활성 탭을 프로그램 방식으로 변경

:

  • 현재 활성 탭 "제"인 경우 - "초"탭이 활성화 될 수 있도록.
  • 현재 활성 탭이 "초"인 경우 - "첫 번째"탭을 활성화하십시오. 나는 내 문제 중 하나가 active="selected" 세그먼트에 따라 것을 확신 http://plnkr.co/edit/2ajxz7oGYmF8oPlHc8kc

    <uib-tabset type="pills" active="selected"> 
        <uib-tab heading="First" index="1"> 
        First data 
        </uib-tab> 
        <uib-tab heading="Second" index="2"> 
        Second data 
        </uib-tab> 
    </uib-tabset> 
    

    : 여기

내 (안) 작업 예입니다. 이것은 변수가 $scope에 위치 할 것으로 기대하고 있기 때문에 (탭 세트의) 분리 된 범위에서 실행 중입니다. 이 세그먼트를 active="$parent.$parent.selected"으로 변경하여 해결 방법을 사용하여이 문제를 전달하려고 시도했지만 성공하지 못했습니다.

$scope.swap = function() { 
    alert($scope.selected); 
    if ($scope.selected == 1) 
     $scope.selected = 2; 
    else 
     $scope.selected = 1; 
    } 

가 어떻게 바로 그것을 수행해야합니다

그래서, 주요 문제는 swap() 기능입니다?

감사합니다 :)

당신은 각도 UI 부트 스트랩의 이전 버전 (0.14.3)를 사용하는

답변

3

<uib-tabset> 
    <uib-tab heading="First" active="selected == 1"> 
    First data 
    </uib-tab> 
    <uib-tab heading="Second" active="selected == 2"> 
    Second data 
    </uib-tab> 
</uib-tabset> 
또한 추가 정보를 원하시면 ( http://angular-ui.github.io/bootstrap/versioned-docs/0.14.3/#/tabs)

작업에 대한

참조 문서 Plunkr (http://plnkr.co/edit/qAbUtv06ck64JCf8JaKp?p=preview)

PS. 위 코드는 1.2.0 버전에서 작동합니다. 버전을 업그레이드 할 수있는 옵션이 있다면 다음을 수행 할 수도 있습니다.

+1

이것은 앵귤러 1.5+ –

+0

에서 할당 할 수없는 오류가 발생합니다. @DevinMcQueeney 예, 작동하지 않습니다. 알 수 있듯이 Angular UI Bootstrap (0.14.3)은 Angular 1.5+와 호환되지 않습니다. – khakiout