How to implement tab switching using AngularJS

This time I will show you how to use AngularJS to switch tabs and tabs. What are the things to note?The following is a practical case, let’s take a look. .

Tab one:

##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>
    
  

Tab two:

angularjs directives:

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>

Tab three:

angularjs command:

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>

Tab four:

angularjs command

The second and third methods are derived from the improvement of the following code, and the effects are the same .

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>

But there is a difference between ng-show and ng-if

The first difference is,

ng-if This dom node is only created when the subsequent expression is true.
ng-show is created initially, use display:block and display:none to control display or non-display.

The second difference is that

ng-if will (implicitly) generate a new scope, ng-switch The same goes for , ng-include, etc. that will dynamically create an interface.

This will result in using basic variables to bind

ng-model in ng-if , and binding this model to another display in the outer layer p Area, when the inner layer changes, the outer layer will not change synchronously, because there are already two variables at this time.

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

ng-show does not have this problem because it does not come with a first-level scope.

The way to avoid this kind of problem is to always bind the elements in the page to the properties of the object (

data.x) rather than directly to the basic variables (x)superior. Scope in AngularJS

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to deal with the failure to install nmp Taobao image on Mac

How to operate Koa2 WeChat public account development Setting up a local development and debugging environment

The above is the detailed content of How to implement tab switching using AngularJS. For more information, please follow other related articles on the PHP Chinese website!