Rumah > Artikel > hujung hadapan web > Ungkapan nota kajian asas AngularJS_AngularJS

Ungkapan nota kajian asas AngularJS_AngularJS

WBOYasal: 2016-05-16 15:59:561086semak imbas

AngularJS mengikat data ke HTML melalui ungkapan.

Ekspresi AngularJS

Ungkapan AngularJS ditulis dalam kurungan berganda: {{ pernyataan ungkapan }}.

Ungkapan AngularJS mengikat data ke HTML dengan cara yang sama seperti arahan ng-bind.

AngularJS akan "mengeluarkan" ungkapan dengan tepat sebagai hasil yang dikira.

Ungkapan AngularJS mempunyai banyak persamaan dengan ungkapan JavaScript Kedua-duanya mengandungi literal, operator dan pembolehubah. Contohnya {{ 5 5 }} dan {{ firstName " " lastName }}

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="">
   <p>My first expression: {{ 5 + 5 }}</p>
</div>

Jika anda mengalih keluar arahan ng-app, ungkapan akan dipaparkan terus pada halaman tanpa dinilai.

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div>
   <p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>

Nombor AngularJS

Nombor AngularJS adalah sama dengan nombor JavaScript:

<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: {{ quantity * cost }}</p>

</div>

Begitu juga, kita boleh menggunakan arahan ng-bind untuk mencapai kesan yang sama:

<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>

</div>

Nota Menggunakan arahan ng-init adalah sangat biasa dalam pembangunan AngularJS. Dalam bahagian Pengawal anda akan melihat cara yang lebih baik untuk memulakan data.

AngularJS String

Rentetan AngularJS adalah sama dengan rentetan JavaScript:

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>The name is {{ firstName + " " + lastName }}</p>

</div>

Begitu juga, kita boleh menggunakan arahan ng-bind untuk mencapai kesan yang sama:

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>

</div>

Objek AngularJS

Objek AngularJS adalah sama dengan objek JavaScript:

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>The name is {{ person.lastName }}</p>

</div>

Begitu juga, kita boleh menggunakan arahan ng-bind untuk mencapai kesan yang sama:

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>The name is <span ng-bind="person.lastName"></span></p>

</div>

AngularJS Array

Tatasusunan AngularJS adalah sama seperti tatasusunan JavaScript:

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is {{ points[2] }}</p>

</div>

Begitu juga, kita boleh menggunakan arahan ng-bind untuk mencapai kesan yang sama:

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is <span ng-bind="points[2]"></span></p>

</div>

Perbandingan ungkapan AngularJS dan ungkapan JavaScript

Seperti ungkapan JavaScript, ungkapan AngularJS juga mengandungi literal, operator dan pembolehubah. Tidak seperti ungkapan JavaScript,

Ekspresi AngularJS boleh ditulis dalam HTML.
Ungkapan AngularJS tidak menyokong pernyataan bersyarat dan gelung, dan tidak ada pernyataan pengecualian.
Ekspresi AngularJS menyokong penapis.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.

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：Ringkasan kaedah jQuery untuk mencapai kesan lompatan lancar bagi mata utama dalam page_jqueryArtikel seterusnya：Ringkasan kaedah jQuery untuk mencapai kesan lompatan lancar bagi mata utama dalam page_jquery

Artikel berkaitan

Lihat lagi