Ekspresi AngularJS
AngularJS mengikat data ke HTML menggunakan Expressions .
Ekspresi AngularJS
Ekspresi AngularJS dapat ditulis di dalam kurung kurawal ganda: .{{ expression }}
Ekspresi AngularJS juga dapat ditulis di dalam direktif: .ng-bind="expression"
AngularJS akan menyelesaikan ekspresi, dan mengembalikan hasilnya persis di tempat ekspresi ditulis.
Ekspresi AngularJS sangat mirip dengan ekspresi JavaScript: Mereka dapat berisi literal, operator, dan variabel.
Contoh {{ 5 + 5 }} atau {{ firstName + " " + lastName }}
Contoh
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Jika Anda menghapus ng-appdirektif, HTML akan menampilkan ekspresi apa adanya, tanpa menyelesaikannya:
Contoh
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Anda dapat menulis ekspresi di mana pun Anda suka, AngularJS hanya akan menyelesaikan ekspresi dan mengembalikan hasilnya.
Contoh: Biarkan AngularJS mengubah nilai properti CSS.
Ubah warna kotak input di bawah ini, dengan mengubah nilainya:
Contoh
<div ng-app="" ng-init="myCol='lightblue'">
<input
style="background-color:{{myCol}}" ng-model="myCol">
</div>
Nomor AngularJS
Nomor AngularJS seperti nomor JavaScript:
Contoh
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
Contoh yang sama menggunakan ng-bind:
Contoh
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>
Menggunakan ng-inittidak terlalu umum. Anda akan mempelajari cara yang lebih baik untuk menginisialisasi data dalam bab tentang pengontrol.
String AngularJS
String AngularJS seperti string JavaScript:
Contoh
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
Contoh yang sama menggunakan ng-bind:
Contoh
<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 seperti objek JavaScript:
Contoh
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
Contoh yang sama menggunakan ng-bind:
Contoh
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is <span ng-bind="person.lastName"></span></p>
</div>
Array AngularJS
Array AngularJS seperti array JavaScript:
Contoh
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>
Contoh yang sama menggunakan ng-bind:
Contoh
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is <span ng-bind="points[2]"></span></p>
</div>
Ekspresi AngularJS vs. Ekspresi JavaScript
Seperti ekspresi JavaScript, ekspresi AngularJS dapat berisi literal, operator, dan variabel.
Tidak seperti ekspresi JavaScript, ekspresi AngularJS dapat ditulis di dalam HTML.
Ekspresi AngularJS tidak mendukung kondisional, loop, dan pengecualian, sedangkan ekspresi JavaScript mendukung.
Ekspresi AngularJS mendukung filter, sedangkan ekspresi JavaScript tidak.
Pelajari tentang JavaScript di Tutorial JavaScript kami .