怎樣使用AngularJS實作標籤頁tab選項卡切換

這次帶給大家怎樣使用AngularJS實作標籤頁tab選項卡切換，使用AngularJS實作標籤頁tab選項卡切換的注意事項有哪些，以下就是實戰案例，一起來看一下。

選項卡一：

#JavaScript html css

nbsp;html>

  
    <meta>
    <title> js标签页tab切换</title>
    <style>
      #p1 .active{
        background:blue;
      }
      #p1 p{
        width:200px;
        height:200px;
        background:gray;
        border:1px solid black;
        display:none;
      }
    </style>
    <script>
      window.onload=function (){
        var op=document.getElementById(&#39;p1&#39;);
        var aBtn=op.getElementsByTagName(&#39;input&#39;);
        var ap=op.getElementsByTagName(&#39;p&#39;);
        for(var i=0;i<aBtn.length;i++){     //遍历p1中的按钮
          aBtn[i].index=i;      //给aBth[]添加自定义属性
          aBtn[i].onclick=function (){
            for(var i=0;i<aBtn.length;i++){ //遍历按钮，将class清除
              aBtn[i].className=&#39;&#39;;
              ap[i].style.display=&#39;none&#39;;
            }
            this.className=&#39;active&#39;;
            ap[this.index].style.display=&#39;block&#39;;
          }
        }
      }
    </script>
  
  
    <p>
      <input>
      <input>
      <input>
      <input>
      </p><p>111</p>
      <p>222</p>
      <p>333</p>
      <p>444</p>
    
  

選項卡二：

angularjs指令：

ng-class、ng-click、ng-if

nbsp;html>


  <meta>
  <title>AngularJS标签页tab切换</title>
  <style>
    .active {
      background-color: orange;
    }
  </style>
  <script></script>


<p>
  <button>张三</button>
  <button>李四</button>
  <button>王五</button>
</p>
<p>
  </p><p>张三的个人信息</p>
  <p>李四的个人信息</p>
  <p>王五的个人信息</p>
  <script>
    var app = angular.module(&#39;s1.app&#39;, []);
    app.run(function ($rootScope) {
      $rootScope.data = {
        current: "1" // 1代表张三，2代表李四，3代表王五
      };
      $rootScope.actions =
      {
        setCurrent: function (param) {
          $rootScope.data.current = param;
        }
      }
    })
  </script>

選項卡三：

angularjs 指令：

ng-class、ng-click、ng-show

nbsp;html>


  <meta>
  <title>
  <script></script>

</title>
<section>
  <ul>
    <li>
      <a>1111111111</a>
    </li>
    <li>
      <a>2222222222</a>
    </li>
    <li>
      <a>33333333333</a>
    </li>
  </ul>
  <!--是否点击-->
  {{panel.isSelected(1)}}
  {{panel.isSelected(2)}}
  {{panel.isSelected(3)}}
  <p>
    </p>
<h1 id="我是">我是1111111111111111111111</h1>
  
  <p>
    </p>
<h1 id="我是">我是22222222222222222</h1>
  
  <p>
    </p>
<h1 id="我是">我是3333333333333333333333</h1>
  
</section>
<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function () {
    this.tab = 2;/*设置默认*/
    this.selectTab = function (setTab) {/*设置tab点击事件*/
      this.tab = setTab;
    };
    this.isSelected = function (checkedTab) {/*页面的切换*/
      return this.tab === checkedTab;
    }
  });
</script>

#選項卡四：

angularjs 指令

第二種和第三種方式來自於下面程式碼的改進，產生的效果都是一樣的。

nbsp;html>


  <meta>
  <title>AngularJS标签页tab切换</title>
  <script></script>


<section>
  <ul>
    <li>
      <a>1111111111</a>
    </li>
    <li>
      <a>2222222222</a>
    </li>
    <li>
      <a>33333333333</a>
    </li>
  </ul>
  <!--是否点击-->
  {{tab===1}}
  {{tab===2}}
  {{tab===3}}
  <p>
    </p>
<h1 id="我是">我是1111111111111111111111</h1>
  
  <p>
    </p>
<h1 id="我是">我是22222222222222222</h1>
  
  <p>
    </p>
<h1 id="我是">我是3333333333333333333333</h1>
  
</section>
<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function () {
  });
</script>

但ng-show和ng-if是有區別的

第一點區別是，

ng-if 在後面表達式為true 的時候才建立這個dom 節點，
ng-show 是初始時就創建了，用display:block 和display:none 來控制顯示和不顯示。

第二點差異是，

ng-if 會（隱含地）產生新作用域，ng-switch 、 ng-include 等會動態創建一塊介面的也是如此。

這樣會導致，在ng-if 中用基本變數綁定ng-model，並在外層p 中把此model 綁定給另一個顯示區域，內層改變時，外層不會同步改變，因為此時已經是兩個變數了。

<p>{{name}}</p>
<p>
  <input>
</p>

ng-show 不存在此問題，因為它不自帶一級作用域。

避免這類問題出現的方法是，始終將頁面中的元素綁定到物件的屬性（data.x）而不是直接綁定到基本變數（x）上。 AngularJS中的作用域

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

怎麼處理Mac內安裝nmp淘寶鏡像失敗

如何操作Koa2微信公眾號開發之本機開發偵錯環境建置

#

以上是怎樣使用AngularJS實作標籤頁tab選項卡切換的詳細內容。更多資訊請關注PHP中文網其他相關文章！