AngularJS入門(3)-Angular表示式
阿新 • • 發佈：2019-01-03
AngularJS 表示式
AngularJS 使用 表示式 把資料繫結到 HTML。
- AngularJS 表示式寫在雙大括號內：
{{ expression }}。 - AngularJS 表示式把資料繫結到 HTML，這與 ng-bind 指令有異曲同工之妙。
- AngularJS 將在表示式書寫的位置”輸出”資料。
- AngularJS 表示式 很像 JavaScript 表示式：它們可以包含文字、運算子和變數。
AngularJS 數字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" 使用ng-bind實現相同效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS</title>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body ng-app="" ng-init AngularJS 字串
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS</title>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body ng-app="" ng-init="first='jiang';last='gujin'">
<div>
{{first + ' ' + last}}
</div>
</body>
</html>AngularJS 物件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS</title>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body ng-app="" ng-init="persion={first:'jiang',last:'gujin'}">
<div>
{{persion.first + ' ' + persion.last}}
</div>
</body>
</html>AngularJS 陣列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS</title>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body ng-app="" ng-init="color=['red', 'blue', 'green']">
<div>
{{color[1]}}
</div>
</body>
</html>AngularJS 表示式 與 JavaScript 表示式
- 類似於 JavaScript 表示式，AngularJS 表示式可以包含字母，操作符，變數。
- 與 JavaScript 表示式不同，AngularJS 表示式可以寫在 HTML 中。
- 與 JavaScript 表示式不同，AngularJS 表示式不支援條件判斷，迴圈及異常。
- 與 JavaScript 表示式不同，AngularJS 表示式支援過濾器。