Penjelasan terperinci tentang cara menggunakan ngShow dan ngHide dalam AngularJS_AngularJS

Hari ini kita akan melihat cara menggunakan arahan ngShow dan ngHide Angular untuk melakukan perkara yang sepatutnya dilakukan, tunjukkan dan sembunyikan!
Apa yang mereka patut lakukan

ngShow dan ngHide membolehkan kami menunjukkan atau menyembunyikan elemen yang berbeza. Ini membantu semasa membuat aplikasi Sudut kerana aplikasi satu halaman kami akan mempunyai banyak bahagian bergerak yang datang dan pergi apabila keadaan aplikasi berubah.

Bahagian hebat tentang arahan ini ialah kita tidak perlu menggunakan CSS atau JS untuk menunjukkan atau menyembunyikannya. Ini semua dilakukan oleh Angular yang berpengalaman.

Penggunaan

Untuk menggunakan ngShow atau ngHide, cuma tambah arahan pada elemen yang ingin anda tunjukkan atau sembunyikan.

<!-- FOR BOOLEAN VALUES =============================== -->
<!-- for true values -->
<div ng-show="hello">this is a welcome message</div>  
 
 <!-- can also show if a value is false --> 
<div ng-show="!hello">this is a goodbye message</div>  
 
<!-- FOR EXPRESSIONS =============================== -->
<!-- show if the appState variable is a string of goodbye -->
<div ng-show="appState == 'goodbye'">this is a goodbye message</div> 
 
<!-- FOR FUNCTIONS =============================== -->
<!-- use a function defined in your controller to evaluate if true or false -->
<div ng-hide="checkSomething()"></div>

Setelah kami menyediakan markup kami, kami boleh menetapkan hello atau selamat tinggal dalam pelbagai cara. Anda boleh menetapkan ini dalam pengawal Sudut anda dan tunjukkan atau sembunyikan div anda apabila apl dimuatkan.

Di atas boleh digunakan untuk ng-show atau ng-hide. Jika nilai atau ungkapan atau fungsi mengembalikan benar, sesuatu disembunyikan.

digunakan sebagai nilai Boolean

Kami akan membuat pautan menggunakan ng-click dan togol nilai goCats kepada benar atau palsu.

<a href ng-click="goCats = !goCats">Toggle Cats</a>

Kemudian kita boleh menggunakan ng-show untuk menunjukkan atau menyembunyikan imej kategori.

 
<img ng-src="http://i.imgur.com/vkW3Lhe.jpg" ng-show="goCats">

ng-src Kami menggunakan ng-src untuk memanggil imej, jadi Angular akan mengesahkan sama ada untuk menyembunyikannya semasa membuat instantiat dan menyemak imej. Jika kita tidak melakukan ini, imej akan muncul semasa tapak dimuatkan sehingga Angular menyedari ia harus disembunyikan.

Ungkapan penghakiman

Di sini kita menilai rentetan yang diluluskan dari kotak input Kami mengikat mod-ng ke kotak input dan menamakannya pembolehubah amino, dan memaparkan gambar yang berbeza berdasarkan kandungan pembolehubah ini.

Seterusnya kami akan memanggil nama pembolehubah kami aminoal.

<input type="text" ng-model="aminal">

Kemudian kami akan menggunakan ng-show untuk menilai rentetan.

<img ng-src="http://i.imgur.com/vkW3Lhe.jpg" ng-show="aminal == 'cat'">

Cara menggunakan

Kami akan melakukan semakan mudah untuk menentukan sama ada input adalah nombor ganjil atau genap. Kami akan membuat kaedah dalam fail AngularJS kami:

// set the default value of our number
$scope.myNumber = 0;
   
// function to evaluate if a number is even
$scope.isEven = function(value) {
 
if (value % 2 == 0)
 return true;
else 
 return false;
 
};

Selepas kaedah dicipta, perkara seterusnya yang perlu kita lakukan ialah menggunakannya melalui ng-show atau ng-hide dan pass dalam nombor kita. Melepasi nombor melalui kaedah memastikan kawalan Sudut bersih dan boleh diuji.

<!-- show if our function evaluates to false -->
<div ng-show="isEven(myNumber)">
  <h2>The number is even.</h2>
</div>
  
<!-- show if our function evaluates to false -->
<div ng-show="!isEven(myNumber)">
  <h2>The number is odd.</h2>
</div>

Kesimpulan

Dengan bimbingan dua arah ini, aplikasi kami akan dipertingkatkan dengan baik. Ini hanya elemen yang menunjukkan dan menyembunyikan fungsi berdasarkan nilai, ungkapan dan fungsi Boolean, tetapi ketiga-tiga mod ini akan digunakan untuk lebih banyak adegan.