cari

Rumah >hujung hadapan web >tutorial js >Angular.js menyemak petua penggunaan ng-app dan ng-model_AngularJS

Angular.js menyemak petua penggunaan ng-app dan ng-model_AngularJS

WBOY
WBOYasal
2016-05-16 15:03:531615semak imbas

Struktur ringkas index.html dalam Angular.js: 

<!doctype html> 
<html ng-app> 
  <head> 
    <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> 
  </head> 
  <body> 
    Your name: <input type="text" ng-model="yourname" placeholder="World"> 
    <hr> 
    Hello {{yourname || 'World'}}! 
  </body> 
</html>

atribut ng-app ialah pernyataan bendera angular.js, yang menandakan skop angular.js. ng-app boleh ditambah di banyak tempat, seperti di atas ditambah pada teg html, menunjukkan bahawa skrip sudut berfungsi pada keseluruhan halaman. Anda juga boleh menambah atribut ng-app secara setempat Sebagai contoh, menambah ng-app dalam div tertentu akan menunjukkan bahawa keseluruhan kawasan div akan dihuraikan menggunakan skrip sudut, manakala lokasi lain tidak akan dihuraikan oleh skrip sudut.
ng-model bermaksud membina model data. Di sini, dalam kotak input untuk memasukkan nama, kami mentakrifkan model data nama anda. Setelah model ditakrifkan, kita boleh memanggilnya di bawah dengan memanfaatkan {{}}. Ini melengkapkan pengikatan data Apabila kami memasukkan kandungan dalam kotak input, ia akan disegerakkan ke blok pernyataan Hello di bawah.
Model data yang ditakrifkan oleh model ng bukan sahaja boleh digunakan dalam senario di atas, tetapi juga boleh digunakan secara meluas dalam banyak situasi.
1. Tetapkan penapis untuk melaksanakan fungsi carian
Dalam kod berikut, kami menggunakan definisi model data ringkas + penapis untuk melengkapkan fungsi carian senarai. (Ini adalah contoh kod daripada tapak web Cina, jadi anda tidak perlu risau tentang bahagian yang tidak jelas dahulu) 

<div class="container-fluid"> 
 <div class="row-fluid"> 
  <div class="span2"> 
   Search: <input ng-model="query"> 
  </div> 
  <div class="span10"> 
   <ul class="phones"> 
    <li ng-repeat="phone in phones | filter:query"> 
     {{phone.name}} 
    <p>{{phone.snippet}}</p> 
    </li> 
   </ul> 
    </div> 
 </div> 
</div>

Dalam kod di atas, pertanyaan model data terikat pada teg input kotak carian. Dengan cara ini, maklumat yang dimasukkan oleh pengguna akan disegerakkan dengan model data pertanyaan. Dalam li berikut, anda boleh menggunakan filter:query untuk melaksanakan fungsi penapisan data dalam senarai dan melakukan penapisan berdasarkan maklumat input pengguna.
2. Tetapkan orderBy untuk melaksanakan fungsi pengisihan senarai
Dalam kod berikut, dengan cara yang sama seperti penapis, orderBy digunakan untuk menambah fungsi pengisihan pada senarai: 

Search: <input ng-model="query"> 
Sort by: 
<select ng-model="orderProp"> 
 <option value="name">Alphabetical</option> 
 <option value="age">Newest</option> 
</select> 
<ul class="phones"> 
 <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"> 
  {{phone.name}} 
  <p>{{phone.snippet}}</p> 
 </li> 
</ul>

Di atas adalah tentang kemahiran penggunaan ng-app dan ng-model, saya harap anda boleh memperoleh sesuatu daripadanya dengan menyemak masa lalu dan mempelajari perkara baharu.

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：js kod pengiraan perbezaan masa [termasuk pengiraan, hari, jam, minit, saat]_kemahiran javascriptArtikel seterusnya：js kod pengiraan perbezaan masa [termasuk pengiraan, hari, jam, minit, saat]_kemahiran javascript

Artikel berkaitan

Lihat lagi