AngularJS mengikat data ke HTML menggunakan Expressions.
AngularJS Expressions
AngularJS ekspresi dapat ditulis dalam tanda kurung ganda: {{ expression }} .
AngularJS ekspresi juga dapat ditulis dalam direktif: ng-bind=" expression " .
AngularJS akan menyelesaikan ekspresi, dan mengembalikan hasil persis di mana ekspresi tertulis.
AngularJS ekspresi seperti ekspresi JavaScript: Mereka dapat berisi literal, operator, dan variabel.
Contoh {{5 + 5}} atau {{firstName + "" + lastName}}
Contoh
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Cobalah sendiri " Jika Anda menghapus ng-app direktif, HTML akan menampilkan ekspresi seperti itu, tanpa menyelesaikan itu:
Contoh
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Cobalah sendiri " Anda dapat menulis ekspresi mana pun Anda suka, AngularJS hanya akan menyelesaikan ekspresi dan mengembalikan hasil.
Contoh: Biarkan AngularJS mengubah nilai properti CSS.
Mengubah warna kotak input di bawah ini, dengan mengubah nilai itu:
Contoh
<div ng-app="" ng-init="myCol='lightblue'">
<input
style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}">
</div>
Cobalah sendiri " 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>
Cobalah sendiri " Misalnya 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>
Cobalah sendiri "  | Menggunakan ng-init tidak sangat umum. Anda akan belajar cara yang lebih baik untuk menginisialisasi data dalam bab tentang controller. |
|---|
AngularJS Strings
AngularJS string seperti string JavaScript:
Contoh
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
Cobalah sendiri " Misalnya 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>
Cobalah sendiri " Objek AngularJS
AngularJS benda seperti objek JavaScript:
Contoh
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
Cobalah sendiri " Misalnya 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>
Cobalah sendiri " AngularJS Array
AngularJS array seperti array JavaScript:
Contoh
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>
Cobalah sendiri " Misalnya 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>
Cobalah sendiri " AngularJS Pernyataan vs JavaScript Pernyataan
Seperti ekspresi JavaScript, AngularJS ekspresi dapat berisi literal, operator, dan variabel.
Tidak seperti ekspresi JavaScript, AngularJS ekspresi dapat ditulis dalam HTML.
AngularJS ekspresi tidak mendukung conditional, loop, dan pengecualian, sementara ekspresi JavaScript lakukan.
AngularJS ekspresi mendukung filter, sementara ekspresi JavaScript tidak.