AngularJS étend le HTML avec de nouvelles propriétés et expressions.
AngularJS peut créer une application à page unique (SPA : Single Page Applications).
Le code est le suivant :
<!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> La fonction de la directive ng-switch est d'afficher les éléments correspondant avec succès. Cette directive doit être utilisée en conjonction avec les directives ng-switch-when et ng-switch-default.
Lorsque la valeur spécifiée correspond à un ou plusieurs éléments avec la directive ng-switch-when ajoutée, ces éléments sont affichés et les éléments sans correspondance sont masqués
.
Si aucun élément correspondant à la valeur on n'est trouvé, l'élément avec la directive ng-switch-default ajoutée sera affiché
.
Ce qui précède est l'intégralité du contenu du masquage et de l'affichage dans AngularJs présenté dans cet article. J'espère que vous l'aimerez.
Comment configurer le serveur Web
La solution au paramètre d'interface chinoise de vscode ne prend pas effet
méthode de suppression de fichier hiberfil
Méthode de migration de base de données MySQL
Promotion d'annonces
Solution de fin de code d'erreur 499
Comment résoudre le crash de démarrage de Tomcat
La différence entre la charge rapide PD et la charge rapide générale
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
