Ungkapan nota kajian asas AngularJS_AngularJS

WBOY
Lepaskan: 2016-05-16 15:59:56
asal
1088 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan