Rumah > Artikel > hujung hadapan web > Bercakap tentang bersembunyi dan menunjukkan dalam AngularJs_AngularJS

Bercakap tentang bersembunyi dan menunjukkan dalam AngularJs_AngularJS

WBOYasal: 2016-05-16 15:27:011157semak imbas

AngularJS memanjangkan HTML dengan sifat dan ungkapan baharu.

AngularJS boleh membina aplikasi halaman tunggal (SPA: Aplikasi Halaman Tunggal).

Kod adalah seperti berikut:

<!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>

Fungsi arahan ng-switch adalah untuk memaparkan elemen yang berjaya dipadankan Arahan ini perlu digunakan bersama-sama dengan arahan ng-switch-bila dan ng-switch-default.
Apabila nilai yang ditentukan padan dengan satu atau lebih elemen dengan arahan ng-switch-apabila ditambah, elemen ini dipaparkan dan elemen yang tidak sepadan disembunyikan Jika tiada unsur yang sepadan dengan nilai hidup ditemui, elemen dengan arahan lalai ng-switch akan dipaparkan

Di atas adalah keseluruhan kandungan bersembunyi dan menunjukkan dalam AngularJs yang diperkenalkan dalam artikel ini.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Kaedah JS untuk menentukan sama ada halaman semasa dibuka dalam kemahiran browser_javascript WeChatArtikel seterusnya：Kaedah JS untuk menentukan sama ada halaman semasa dibuka dalam kemahiran browser_javascript WeChat

Artikel berkaitan

Lihat lagi