Susun beberapa arahan biasa dalam AngularJS_AngularJS-tutorial js-php.cn

Susun beberapa arahan biasa dalam AngularJS_AngularJS

WBOY

Lepaskan： 2016-05-16 15:54:42

asal

1268 orang telah melayarinya

Arahan AngularJS digunakan untuk melanjutkan HTML. Ini adalah sifat istimewa bermula dengan awalan ng-. Kami akan membincangkan arahan berikut:

ng-app - Perintah ini memulakan aplikasi AngularJS.
ng-init - Arahan ini memulakan data aplikasi.
ng-model - Arahan ini mentakrifkan model, iaitu pembolehubah yang digunakan dalam AngularJS.
ng-repeat - Arahan ini akan mengulangi elemen HTML untuk setiap item dalam koleksi.

arahan ng-app

Arahan

ng-app memulakan aplikasi AngularJS. Ia mentakrifkan unsur akar. Ia secara automatik memulakan atau memulakan aplikasi yang memuatkan halaman web yang mengandungi aplikasi AngularJS. Ia juga digunakan untuk memuatkan pelbagai modul AngularJS ke dalam aplikasi AngularJS. Dalam contoh di bawah, kami mentakrifkan aplikasi AngularJS lalai menggunakan atribut ng-app bagi elemen div.

<div ng-app="">
...
</div>

Salin selepas log masuk

arahan ng-init

Arahan ng-init memulakan data aplikasi AngularJS. Ia digunakan untuk meletakkan nilai ke dalam pembolehubah yang digunakan dalam aplikasi. Dalam contoh berikut, kami akan memulakan tatasusunan negara. Gunakan sintaks JSON untuk menentukan tatasusunan negara.

<div ng-app="" ng-init="countries=[{locale:'en-US',name:'United States'},
                  {locale:'en-GB',name:'United Kingdom'},
                  {locale:'en-FR',name:'France'}]">
     
...
</div>

Salin selepas log masuk

arahan model-ng

arahan model-ng mentakrifkan model/pembolehubah yang digunakan dalam aplikasi AngularJS. Dalam contoh di bawah, kami mentakrifkan model bernama "nama".

<div ng-app="">
...
<p>Enter your Name: <input type="text" ng-model="name"></p>
</div>

Salin selepas log masuk

arahan ng-ulang

Arahan

ng-repeat mengulangi setiap item dalam koleksi elemen html. Dalam contoh di bawah, kami telah mengulangi negara tatasusunan.

<div ng-app="">
...
  <p>List of Countries with locale:</p>
  <ol>
   <li ng-repeat="country in countries">
     {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
   </li>
  </ol>
</div>

Salin selepas log masuk

Contoh

Contoh berikut akan menunjukkan semua arahan di atas.
testAngularJS.html

<html>
<title>AngularJS Directives</title>
<body>
<h1>Sample Application</h1>
<div ng-app="" ng-init="countries=[{locale:'en-US',name:'United States'},
                  {locale:'en-GB',name:'United Kingdom'},
                  {locale:'en-FR',name:'France'}]">
  <p>Enter your Name: <input type="text" ng-model="name"></p>
  <p>Hello <span ng-bind="name"></span>!</p>
  <p>List of Countries with locale:</p>
  <ol>
   <li ng-repeat="country in countries">
     {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
   </li>
  </ol>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

Salin selepas log masuk

Output

Buka textAngularJS.html dalam penyemak imbas web anda. Masukkan nama dan lihat hasilnya di bawah.

2015616115415280.png (613×372)