recherche

Maison >interface Web >js tutoriel >Parlez de cacher et d'afficher dans AngularJs_AngularJS

Parlez de cacher et d'afficher dans AngularJs_AngularJS

WBOY
WBOYoriginal
2016-05-16 15:27:011218parcourir

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.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Méthode JS pour déterminer si la page actuelle est ouverte dans les compétences du navigateur WeChat_javascriptArticle suivant：Méthode JS pour déterminer si la page actuelle est ouverte dans les compétences du navigateur WeChat_javascript

Articles Liés

Voir plus