tab tab Bar Toggle authoritative Summary

There are two ways to implement the Angular tab bar:

1. 1. The contents are loaded into the page, and then the ng-show instructions are used.
   2. Make a template of each piece of content to be loaded and load it with the ng-if instruction.

Detailed examples are as follows:

• Ng-show

<script>
varApp = Angular.module ("app",[]); App.controller (' Datailcontroller ', [' $scope ',function($scope) {$scope. Detaildowntitle={title: ["topic Details", "Related content", "Recommended content", "process log"], Count:0, Datailshow:function(index) {if(index==0){                 This. count=0; }Else if(index==1){                 This. count=1; }Else if(index==2){                 This. count=2; }Else if(index==3){                 This. count=3; }Else{                           }        }}]);
</script>

The HTML template is as follows:

<div class= "Detaildown" >    <ul class= "Detaildowntitle" >        <li data-ng-repeat= "title in Detaildowntitle.title "data-ng-click=" Detaildowntitle.datailshow ($index) "><a>{{title}}</a></ Li>  //$index to determine which tab is clicked    </ul>

<div data-ng-show= "Detaildowntitle.count==0" >
<div>Tab1</div>
</div>
<div data-ng-show= "Detaildowntitle.count==1" >
<div>Tab2</div>
</div>
<div data-ng-show= "detaildowntitle.count==2" >
<div>Tab3</div>
</div>

<div data-ng-show= "Detaildowntitle.count==3" >
<div>Tab4</div>
</div>

</div>

Home page Index.html introduced in the following ways

    <div class= "detailcontent" data-ng-include= "' topicdetail.html '" ng-controller= "Datailcontroller" >   // Note Path           </div>

• Ng-if

Like the script tag, the HTML template looks like this:

<div class= "Detaildown" >    <ul class= "Detaildowntitle" >        <li data-ng-repeat= "title in Detaildowntitle.title "data-ng-click=" Detaildowntitle.datailshow ($index) "><a>{{title}}</a></ li>    </ul>    <div data-ng-include= "'/topic/template/topiccontent.html '" data-ng-if= " Detaildowntitle.count==0 "></div>    <div data-ng-include=" '/topic/template/linkcontent.html ' " data-ng-If= "Detaildowntitle.count==1" ></div>    <div data-ng-include= "'/topic/template/ Recommendcontent.html ' "data-ng-if=" detaildowntitle.count==2 "></div></div>

If the subsequent discovery of a new implementation method, will continue to summarize

Tab tab Bar Toggle authoritative Summary