How to implement tab switching using AngularJS-JS Tutorial-php.cn

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:

##JavaScripthtml css

js标签页tab切换

111

222

333

444

Copy after login

Tab two:

angularjs directives:

ng-class, ng-click, ng-if

AngularJS标签页tab切换

张三的个人信息

李四的个人信息

王五的个人信息

Copy after login

Tab three:

angularjs command:

ng-class, ng-click, ng-show

     <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script>
</head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <section ng-controller="myCtrl as panel"> <ul> <li ng-class="{active:panel.isSelected(1)}"> <a href ng-click="panel.selectTab(1)">1111111111</a> </li> <li ng-class="{active:panel.isSelected(2)}"> <a href ng-click="panel.selectTab(2)">2222222222</a> </li> <li ng-class="{active:panel.isSelected(3)}"> <a href ng-click="panel.selectTab(3)">33333333333</a> </li> </ul> <!--是否点击--> {{panel.isSelected(1)}} {{panel.isSelected(2)}} {{panel.isSelected(3)}} <p class="panel" ng-show="panel.isSelected(1)"> <h1>我是1111111111111111111111</h1> </p> <p class="panel" ng-show="panel.isSelected(2)"> <h1>我是22222222222222222</h1> </p> <p class="panel" ng-show="panel.isSelected(3)"> <h1>我是3333333333333333333333</h1> </p> </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> </body> </html></pre>
        <div class="contentsignin">
         Copy after login
        </div>
       </div>
       <p style="text-align: left;"><span style="font-size: medium">Tab four:<strong></strong></span></p>angularjs command
       <p style="text-align: left;"></p>The second and third methods are derived from the improvement of the following code, and the effects are the same .
       <p style="text-align: left;"></p>
       <div class="code" style="position:relative; padding:0px; margin:0px;">
        <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <meta charset="UTF-8"> <title>AngularJS标签页tab切换  
     1111111111 
  2222222222 
  33333333333 
 
  {{tab===1}} {{tab===2}} {{tab===3}}  
我是1111111111111111111111
 
  
我是22222222222222222
 
  
我是3333333333333333333333

Copy after login

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

The first difference is,

ng-ifThis dom node is only created when the subsequent expression is true.
ng-showis created initially, usedisplay:blockanddisplay:noneto control display or non-display.

The second difference is that

ng-ifwill (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-modelinng-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.

{{name}}

Copy after login

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!