ホームページ > 記事 > ウェブフロントエンド > AngularJSを使用してタブ切り替えを実装する方法
今回は、AngularJS を使用してタブ ページのタブ切り替えを実装する方法と、AngularJS を使用してタブ ページのタブ切り替えを実装する際の注意事項を説明します。以下は実際のケースです。見てみましょう。
タブ 1:
JavaScript+html+css
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <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('p1'); var aBtn=op.getElementsByTagName('input'); var ap=op.getElementsByTagName('p'); 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=''; ap[i].style.display='none'; } this.className='active'; ap[this.index].style.display='block'; } } } </script> </head> <body> <p id="p1"> <input class="active" type="button" value="选项1" /> <input type="button" value="选项2" /> <input type="button" value="选项3" /> <input type="button" value="选项4" /> <p style="display:block;">111</p> <p>222</p> <p>333</p> <p>444</p> </p> </body> </html>
タブ 2:
angularjs コマンド: ng-class、ng-click、ng-ifリーリー
タブ 3:
angularjs ディレクティブ: ng-class、ng-click、ng-show<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS标签页tab切换</title> <style> .active { background-color: orange; } </style> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app="s1.app"> <p> <button ng-class="{ 'active' : data.current == 1 }" ng-click="actions.setCurrent(1)">张三</button> <button ng-class="{ 'active' : data.current == 2 }" ng-click="actions.setCurrent(2)">李四</button> <button ng-class="{ 'active' : data.current == 3 }" ng-click="actions.setCurrent(3)">王五</button> </p> <p> <p ng-if="data.current == 1">张三的个人信息</p> <p ng-if="data.current == 2">李四的个人信息</p> <p ng-if="data.current == 3">王五的个人信息</p> <script> var app = angular.module('s1.app', []); app.run(function ($rootScope) { $rootScope.data = { current: "1" // 1代表张三,2代表李四,3代表王五 }; $rootScope.actions = { setCurrent: function (param) { $rootScope.data.current = param; } } }) </script> </p> </body> </html>
タブ 4:
angularjs ディレクティブ2 番目と 3 番目のメソッドは、以下のコードを改良したものですが、効果は同じです。
<!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <meta charset="UTF-8"> <title AngularJS标签页tab切换</title> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <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>
しかし、ng-show と ng-if には違いがあります
最初の違いは、
ng-if
は次の式が true の場合にのみ機能するということです。この dom ノードを作成すると、最初に ng-show
が作成されます。display:block
と display:none
を使用して表示と非表示を制御します。見せる。 ng-if
在后面表达式为 true 的时候才创建这个 dom 节点,ng-show
是初始时就创建了,用display:block
和 display:none
来控制显示和不显示。
第二点区别是,
ng-if
会(隐式地)产生新作用域,ng-switch
、 ng-include
等会动态创建一块界面的也是如此。
这样会导致,在 ng-if
中用基本变量绑定 ng-model
,并在外层 p 中把此 model 绑定给另一个显示区域,内层改变时,外层不会同步改变,因为此时已经是两个变量了。
<!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <meta charset="UTF-8"> <title>AngularJS标签页tab切换</title> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <section ng-init="tab=3"> <ul> <li ng-class="{active:tab===1}"> <a href ng-click="tab=1">1111111111</a> </li> <li ng-class="{active:tab===2}"> <a href ng-click="tab=2">2222222222</a> </li> <li ng-class="{active:tab===3}"> <a href ng-click="tab=3">33333333333</a> </li> </ul> <!--是否点击--> {{tab===1}} {{tab===2}} {{tab===3}} <p class="panel" ng-show="tab===1"> <h1>我是1111111111111111111111</h1> </p> <p class="panel" ng-show="tab===2"> <h1>我是22222222222222222</h1> </p> <p class="panel" ng-if="tab===3"> <h1>我是3333333333333333333333</h1> </p> </section> <script> var app = angular.module("myApp", []); app.controller("myCtrl", function () { }); </script> </body> </html>
ng-show 不存在此问题,因为它不自带一级作用域。
避免这类问题出现的办法是,始终将页面中的元素绑定到对象的属性(data.x
)而不是直接绑定到基本变量(x
2 番目の違いは、
ng-if
が新しいスコープ ng-switch
と ng-include
を (暗黙的に) 生成することです。インターフェースを動的に作成する場合も同様です。
<p>{{name}}</p> <p ng-if="true"> <input type="text" ng-model="name"> </p>
この種の問題を回避する方法は、基本変数 (x) に直接バインドするのではなく、ページ内の要素を常にオブジェクト (<code>data.x
) のプロパティにバインドすることです。 コード>) をオンにします。 AngularJS のスコープ この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
以上がAngularJSを使用してタブ切り替えを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。