Ungkapan AngularJS
AngularJS menggunakan ungkapan untuk mengikat data ke HTML.
Ekspresi AngularJS
Ekspresi AngularJS ditulis dalam kurungan kerinting berganda: {{ ungkapan }}.
Ekspresi AngularJS mengikat data ke HTML, yang serupa dengan arahan ng-bind.
AngularJS akan "mengeluarkan" data tempat ungkapan ditulis.
Ekspresi AngularJS sama seperti JavaScript Ungkapan : Ia boleh mengandungi literal, operator dan pembolehubah.
Instance {{ 5 + 5 }} atau {{ firstName + " " + lastName }}
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app>
<p>我的第一个表达式: {{ 5 + 5 }}</p>
</div>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
AngularJS Numbers
AngularJS Numbers adalah seperti Nombor JavaScript:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="quantity=1;cost=5">
<p>总价: {{ quantity * cost }}</p>
</div>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Gunakan contoh ng-bind yang sama:
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="" ng-init="quantity=1;cost=5"> <p>总价: <span ng-bind="quantity * cost"></span></p> </div> </body> </html>
Jalankan Instance»
Klik butang "Jalankan Instance" untuk melihat Contoh dalam talian
 | Menggunakan
|
|---|
AngularJS Strings
AngularJS Strings sama seperti JavaScript Strings:
Instances
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>姓名: {{ firstName + " " + lastName }}</p>
</div>
</body>
</html>Run Instance »
Klik butang "Jalankan Instance" untuk melihat contoh dalam talian
Instance yang sama menggunakan ng-bind:
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="" ng-init="firstName='John';lastName='Doe'"> <p>姓名: <span ng-bind="firstName + ' ' + lastName"></span></p> </div> </body> </html>
Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
AngularJS Object
Objek AngularJS adalah seperti objek JavaScript:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓为 {{ person.lastName }}</p>
</div>
</body>
</html>Run Instance»
Klik "Run Instance butang " untuk melihat contoh dalam talian
Tindas yang sama menggunakan ng-bind:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓为 <span ng-bind="person.lastName"></span></p>
</div>
</body>
</html>Running instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
AngularJS Array
AngularJS array adalah seperti JavaScript array:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三个值为 {{ points[2] }}</p>
</div>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Instance yang sama menggunakan ng-bind:
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>第三个值为 <span ng-bind="points[2]"></span></p> </div> </body> </html>
Run Instance»
Klik "Run Butang Instance" untuk melihat contoh dalam talian
Ekspresi AngularJS dan ungkapan JavaScript
Sama seperti ungkapan JavaScript, ungkapan AngularJS boleh mengandungi huruf, operator dan pembolehubah.
Tidak seperti ungkapan JavaScript, ungkapan AngularJS boleh ditulis dalam HTML.
Tidak seperti ungkapan JavaScript, ungkapan AngularJS tidak menyokong pertimbangan bersyarat, gelung dan pengecualian.
Tidak seperti ungkapan JavaScript, ungkapan AngularJS menyokong penapis.
