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
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.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Pembelajaran sudut bercakap tentang komponen kendiri (Komponen Kendiri)
Dec 19, 2022 pm 07:24 PM
Artikel ini akan membawa anda untuk terus belajar sudut dan memahami secara ringkas komponen kendiri (Komponen Kendiri) dalam Angular Saya harap ia akan membantu anda!
Penjelasan terperinci tentang pengurus keadaan pembelajaran sudut NgRx
May 25, 2022 am 11:01 AM
Artikel ini akan memberi anda pemahaman yang mendalam tentang pengurus negeri Angular NgRx dan memperkenalkan cara menggunakan NgRx saya harap ia akan membantu anda!
Apakah yang perlu saya lakukan jika projek itu terlalu besar? Bagaimana untuk membahagikan projek Angular dengan munasabah?
Jul 26, 2022 pm 07:18 PM
Projek Angular terlalu besar, bagaimana untuk membahagikannya secara munasabah? Artikel berikut akan memperkenalkan kepada anda cara membahagikan projek Angular secara munasabah. Saya harap ia akan membantu anda!
Mari kita bincangkan tentang cara menyesuaikan format pemilih masa-masa-sudut
Sep 08, 2022 pm 08:29 PM
Bagaimana untuk menyesuaikan format angular-datetime-picker? Artikel berikut membincangkan cara menyesuaikan format saya harap ia akan membantu semua orang!
Analisis ringkas komponen bebas dalam Angular dan lihat cara menggunakannya
Jun 23, 2022 pm 03:49 PM
Artikel ini akan membawa anda melalui komponen bebas dalam Angular, cara mencipta komponen bebas dalam Angular, dan cara mengimport modul sedia ada ke dalam komponen bebas saya harap ia akan membantu anda!
Panduan langkah demi langkah untuk memahami suntikan pergantungan dalam Angular
Dec 02, 2022 pm 09:14 PM
Artikel ini akan membawa anda melalui suntikan pergantungan, memperkenalkan masalah yang diselesaikan oleh suntikan pergantungan dan kaedah penulisan asalnya, dan bercakap tentang rangka kerja suntikan pergantungan Angular saya harap ia akan membantu semua orang.
Angular's :host, :host-context, ::ng-deep selectors
May 31, 2022 am 11:08 AM
Artikel ini akan memberi anda pemahaman yang mendalam tentang beberapa pemilih khas dalam Angular: host, :host-context, ::ng-deep Saya harap ia akan membantu anda!
Pemahaman mendalam tentang @Component decorator dalam sudut
May 27, 2022 pm 08:13 PM
Komponen ialah subkelas Arahan Ia adalah penghias yang digunakan untuk menandakan kelas sebagai komponen Sudut. Artikel berikut akan memberi anda pemahaman yang mendalam tentang @Component decorator dalam sudut saya harap ia akan membantu anda.
