Heim > Web-Frontend > js-Tutorial > Sprechen Sie über das Ausblenden und Anzeigen in AngularJs_AngularJS

Sprechen Sie über das Ausblenden und Anzeigen in AngularJs_AngularJS

WBOY
Freigeben: 2016-05-16 15:27:01
Original
1216 Leute haben es durchsucht

AngularJS erweitert HTML um neue Eigenschaften und Ausdrücke.

AngularJS kann eine Einzelseitenanwendung erstellen (SPAs: Einzelseitenanwendungen).

Der Code lautet wie folgt:

<!DOCTYPE html>
<html ng-app="a2_12">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/angularJs-1.2.16-min.js"></script>
<style type="text/css">
body{
font-size: 12px;
}
ul{
list-style-type: none;
width: 408px;
margin: 0px;
padding: 0px;
}
div{
margin: 8px 0px;
}
</style>
</head>
<body>
<div ng-controller="c2_12">
<div ng-show="{{isShow}}">陶国荣</div>
<div ng-hide="{{isHide}}">1012@qq.con</div>
<ul ng-switch on={{switch}}>
<li ng-switch-when="1">11111111111111111</li>
<li ng-switch-when="2">22222222222222222</li>
<li ng-switch-default>33333333333333333</li>
</ul>
</div>
<script type="text/javascript">
var a2_12 = angular.module('a2_12', []);
a2_12.controller('c2_12', ['$scope', function($scope) {
$scope.isShow=true;
$scope.isHide=false;
$scope.switch=2;
}]);
</script>
</body>
</html> 
Nach dem Login kopieren

Die Funktion der ng-switch-Anweisung besteht darin, erfolgreich übereinstimmende Elemente anzuzeigen. Diese Anweisung muss in Verbindung mit den ng-switch-when- und ng-switch-default-Anweisungen verwendet werden.
Wenn der angegebene on-Wert mit einem oder mehreren Elementen mit der hinzugefügten ng-switch-when-Direktive übereinstimmt, werden diese Elemente angezeigt und nicht übereinstimmende Elemente ausgeblendet
Wenn kein Element gefunden wird, das dem Wert on entspricht, wird das Element mit der hinzugefügten ng-switch-default-Direktive
angezeigt

Das Obige ist der gesamte Inhalt des in diesem Artikel vorgestellten Versteckens und Anzeigens.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage