Heim >Web-Frontend >js-Tutorial >So implementieren Sie den Tab-Wechsel mit AngularJS
Dieses Mal zeige ich Ihnen, wie Sie AngularJS zum Implementieren des Tabulatorwechsels verwenden.
Tab eins:
JavaScriptTab zwei: AngularJS-Befehle:
ng-class, ng-click, ng-if
<!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>
Registerkarte drei: AngularJS-Befehl:
ng-class, ng-click, ng-show
<!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>
Tab 4: AngularJS-Befehl
Die zweite und dritte Methode sind aus der Verbesserung des folgenden Codes abgeleitet und haben die gleichen Auswirkungen.
<!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>
Aber es gibt einen Unterschied zwischen ng-show und ng-if
Der erste Unterschied ist,Dieser Dom-Knoten wird nur erstellt, wenn der nachfolgende Ausdruck wahr ist.
ng-if wird zunächst erstellt. Verwenden Sie
und ng-show, um die Anzeige oder Nichtanzeige zu steuern. display:blockdisplay:none
(implizit) einen neuen Bereich generiert und
, ng-if usw. dynamisch einen neuen Bereich erstellt neuer Geltungsbereich Das Gleiche gilt für die Schnittstelle. ng-switchng-includeDies führt zu einer Bindung
und zur Bindung dieses Modells an einen anderen Anzeigebereich in der äußeren Ebene p. Wenn sich die innere Ebene ändert, wird die äußere Ebene nicht synchronisiert. Ändern, da zu diesem Zeitpunkt bereits zwei Variablen vorhanden sind. ng-if
<p>{{name}}</p>
<p ng-if="true">
<input type="text" ng-model="name">
</p>
ng-modelng-show hat dieses Problem nicht, da es nicht über einen Scope der ersten Ebene verfügt. Die Möglichkeit, diese Art von Problem zu vermeiden, besteht darin, die Elemente auf der Seite immer an die Eigenschaften des Objekts zu binden (
) und nicht direkt an die Basisvariablen (). Scope in AngularJS data.xx Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Wie man mit einem Fehler bei der Installation des nmp Taobao-Images auf dem Mac umgehtSo bedienen Sie Koa2 WeChat Entwicklung eines öffentlichen Kontos Einrichten einer lokalen Entwicklungs- und Debugging-UmgebungDas obige ist der detaillierte Inhalt vonSo implementieren Sie den Tab-Wechsel mit AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!