활성 탭만 활성화하고 다른 모든 탭은 기본적으로 Angularjs로 비활성화하는 방법은 무엇입니까?

Question

"탭 1, 탭 2, 탭 3, 탭 4"의 네 가지 탭이 있습니다.

기본적으로 모든 탭이 비활성화되어야하며 활성 탭이 활성화되어야합니다.

활성 탭에서 제출 버튼을 클릭하면 다음 탭을 활성화하고 활성으로 설정하고 이전 탭을 비활성화하여 다음 탭으로 자동 이동해야합니다.

<li class="myli" ng-repeat="tab in tabs track by $index" ng-class="{active:isSelected($index)}"><a href ng-click="displaySelectedtab(tab, $index)">{{tab}}</a></li> 

<div class="panel-body newPanelBody" ng-if="displaytab1 && !displaytab2 && !displaytab3 && !displaytab4"> 
    <form name="actForm" role="form" data-ng-init="resp()" ng-submit="save()" novalidate> 
     <h4>Tab1</h4> 
     <br> 
     <button class="btn save sbmt" type="submit" id="submit">SAVE & CONTINUE</button> 
    </form> 
</div> 

<div class="panel-body newPanelBody" ng-if="displaytab2 && !displaytab1 && !displaytab3 && !displaytab4"> 
    <form name="actForm" role="form" data-ng-init="resp()" ng-submit="save()" novalidate> 
     <h4>Tab2</h4> 
     <br> 
     <button class="btn save sbmt" type="submit" id="submit">SAVE & CONTINUE</button> 
    </form> 
</div> 

<div class="panel-body newPanelBody" ng-if="displaytab3 && !displaytab1 && !displaytab2 && !displaytab4"> 
    <form name="actForm" role="form" data-ng-init="resp()" ng-submit="save()" novalidate> 
     <h4>Tab3</h4> 
     <br> 
     <button class="btn save sbmt" type="submit" id="submit">SAVE & CONTINUE</button> 
    </form> 
</div> 

<div class="panel-body newPanelBody" ng-if="displaytab4 && !displaytab1 && !displaytab2 && !displaytab3"> 
    <form name="actForm" role="form" data-ng-init="resp()" ng-submit="save()" novalidate> 
     <h4>Tab4</h4> 
     <br> 
     <button class="btn save sbmt" type="submit" id="submit">SAVE & CONTINUE</button> 
    </form> 
</div> 

Answer 1

첫째, .panel - 몸과 .btn의 사용은 당신이 부트 스트랩 사용하므로, 여기 봐 가지고 가정 저를 가지고 https://angular-ui.github.io/bootstrap/ 는 각도 및 부트 스트랩에 사용하기 위해 만든 해당 페이지에 탭 구성 요소가있다.

두 번째로 부울을 사용하여 표시 할 탭을 제어하는 ​​대신 정수를 사용하여 현재 선택된 탭을 제어하는 ​​것이 훨씬 쉽습니다. 그러면 다양한 양의 탭으로 작업 할 수 있습니다.

<li class="myli" ng-repeat="tab in tabs track by $index" ng-class="{active: selectedIndex == $index}"><a href ng-click="displaySelectedtab(tab, $index)">{{tab}}</a></li> 

<div class="panel-body newPanelBody" ng-repeat="tab in tabs track by $index" ng-if="selectedIndex == $index"> 
    <h4>Tab {{$index + 1}}</h4> 

    <!-- If you need different content for each tab you can include an angular template as well --> 
    <ng-include src="'path/to/template.tpl.html'"></ng-include> 
</div> 

탭 콘텐츠를 조금 저장하는 방법에 대해 생각해보십시오. 가장 쉬운 방법은 아마도 템플릿을 사용하는 것입니다.

$scope.tabs = [ 
    { 
     "title": "Tab 1", 
     "templateUrl": "path/to/template.tpl.html" 
    } 
]; 

귀하의 NG-포함하는 다음과 같은과 같습니다 :

이 경우 당신은 당신의 탭의 배열, 탭 제목뿐만 아니라 내용 템플릿 URL을 모두 포함하므로 같은 객체를 포함하는 전략을 고안 수

양식 제출 작업을 다른 탭으로 이동하면 $ scope.selectedIndex 변수를 열려는 색인의 색인으로 변경하는 간단한 작업이됩니다.

Answer 2

변경 ng-if="displaytab1 && !displaytab2 && !displaytab3 && !displaytab4" 당신의 버튼에서 ng-if="$index==selected"

에 기능은 컨트롤러 방법이 ng-submit="save($index)"

같은 인덱스를 추가 제출

`$scope.selected=1; $scope.save= function(index){selected=index+1;}`