cari

Rumah >hujung hadapan web >tutorial js >Beberapa kes menunjukkan dan menyembunyikan elemen menggunakan AngularJS_AngularJS

Beberapa kes menunjukkan dan menyembunyikan elemen menggunakan AngularJS_AngularJS

WBOY
WBOYasal
2016-05-16 15:27:001777semak imbas

Kes 1: Terdapat n cara untuk mengawal paparan dan penyembunyian elemen html: html tersembunyi, paparan css, jquery's hide() dan show(), bootstrap's .hide. Tumpuan hari ini bukan pada menunjukkan dan menyembunyikan, tetapi memantau nilai pembolehubah Boolean tertentu dan secara automatik menukar paparan dan menyembunyikan keadaan elemen. Fungsi mendengar, jika pertimbangan, memilih dom, menetapkan dom, ia tidak boleh dilakukan dalam 5 baris kod, dan ia tidak mempunyai kandungan teknikal.
Lihat kod: 

<!DOCTYPE html>
<html ng-app>
<head>
 <meta charset="utf-8">
 <title>ng-show and ng-hide directives</title>
</head>
<body>
<div ng-controller="VisibleController">
 <p ng-show="visible">字符串1</p>
 <p ng-hide="visible">字符串2</p>
 <button ng-click="toggle()">切换</button>
</div>
 
<script src="../lib/angularjs/1.2.26/angular.min.js"></script>
<script>
 function VisibleController($scope) {
 $scope.visible = false;
 $scope.toggle = function () {
  $scope.visible = !$scope.visible;
 }
 }
</script>
</body>
</html>

Kes 2: Menunjukkan dan menyembunyikan elemen ialah ciri teras untuk menu, alatan sensitif konteks dan banyak situasi lain. Seperti fungsi lain dalam Angularr, Angular memacu muat semula UI dengan mengubah suai model data, dan kemudian mencerminkan perubahan pada UI melalui arahan.
Fungsi dua arahan ng-show dan ng-hide adalah setara, tetapi kesan operasi adalah sebaliknya. Dalam erti kata lain, ng-show akan memaparkan elemen apabila ungkapan itu benar, dan akan menyembunyikan elemen apabila ia palsu manakala ng-hide adalah sebaliknya;
Prinsip kerja kedua-dua arahan ini ialah: tetapkan gaya elemen kepada paparan:sekat untuk memaparkan elemen mengikut situasi sebenar tetapkannya kepada paparan:tiada untuk menyembunyikan elemen;
Contoh: 

<html ng-app='myApp'>

<head>

<title>ng-show实例</title>

</head>

<body ng-controller='ShowController'>

<button ng-click="toggleMenu()">Toggle Menu</button>

<ul ng-show='menuState.show'>

<li>Stun</li>

<li>Disintegrate</li>

<li>Erase from history</li>

</ul>

<script src="lib/angular/angular.js"></script>

<script>var myApp=angular.module('myApp',[]) myApp.controller('ShowController', function($scope) {$scope.menuState={show: false}$scope.toggleMenu=function() {$scope.menuState.show=!$scope.menuState.show;}});</script>

</body>

</html>

Hasil jalankan:


Klik butang "Togol Menu", kesannya adalah seperti berikut:

Klik butang "Togol Menu" sekali lagi, dan maklumat di bawah akan disembunyikan semula dan ditukar secara bergilir-gilir.

Kes 3: 

<!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 padankan satu atau lebih elemen dengan ng-switch-apabila arahan 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 ditambah akan dipaparkan.

Di atas ialah tiga kes menunjukkan dan bersembunyi dalam AngularJS yang dikongsi dengan anda.

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：Pelaksanaan sempurna kemahiran query_javascript paging bootstrapArtikel seterusnya：Pelaksanaan sempurna kemahiran query_javascript paging bootstrap

Artikel berkaitan

Lihat lagi