suchen

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
WBOYOriginal
2016-05-16 15:27:011218Durchsuche

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>

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.

Stellungnahme：
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
Vorheriger Artikel：JS-Methode, um zu bestimmen, ob die aktuelle Seite im WeChat-Browser_Javascript-Fähigkeiten geöffnet istNächster Artikel：JS-Methode, um zu bestimmen, ob die aktuelle Seite im WeChat-Browser_Javascript-Fähigkeiten geöffnet ist

In Verbindung stehende Artikel

Mehr sehen