AngularJS 使用 表示式 把資料繫結到 HTML。
AngularJS 表示式
AngularJS 表示式寫在雙大括號內：{{ expression }}。
AngularJS 表示式把資料繫結到 HTML，這與 ng-bind 指令有異曲同工之妙。
AngularJS 將在表示式書寫的位置"輸出"資料。
AngularJS 表示式 很像 JavaScript 表示式：它們可以包含文字、運算子和變數。
例項 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
<!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>
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKUAAAAjCAIAAAB6oF1IAAACRElEQVR4nO2Y2ZWDMAxF3Q/10A/1UA/9MB9ZhsjSk+SF5BzpfWEjtPhahqScqUgq304gdauSdywl71hK3rGUvGMpecdS8o6l5B1LyTuWFN6lFPYaW6r27C3sv0dez22ZNEeZVzgTFN176T085eS8vImkySEaznvIfrX30kDxebMrDvajq37Wz7zNjrfpye0zVlIVYMaSWNuzzXIc0RISaWmkydqnFKhfbWtqsRzL26ZjW0pZtoOZLaWUdTcEtSek9ut1iJ/1NlObmpG4dgauQq3UXPW+PowI7319gf6/Qgm7CmDzK90t6zI2SnLCzveRUCKOsj8frfzB+9iWC+N9rbufBrUnZFxBdoFu5o0dqv6BAdgEX+BNxtV2YILaE7oOpevrENsY+0m1JE8ZSeCutZBgqwYtUVfHG+9rYd7RT1Gg9AjXj3Sdt8oP06rt1eFwYbSu/ST5VCjCR+yazrsT3u/zZi29/W0sZzrvY1uaeUsHo3pasmXUNq5m6pTRm4QQV2SpV5r0ljnl/f1ebpyfsXfBJAlntG+QsV/ZQnCzGltZmlR3FRH+Pjfg9n+v1Zh7eFs2Vr9Ubw1pNGTInl74nCDaV+7393Om6fc3yQ9cXxNVj2L8aiAXY2FjhyCN2oA4tL8m8Evqw5v4ff76v6XQ+wP+X7tmIBVs6e96XdjKvceaV3YwkrFUb73XcROD0DMKZwKBDJQn/R9Bna6a5WrEqZng6HdEuSFG6neUvGMpecdS8o6l5B1LyTuWkncsJe9YSt6x9Af6pbywJOPSRgAAAABJRU5ErkJggg==" alt="" />
AngularJS 數字
<!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>
使用 ng-bind 的相同例項：
<!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>
使用 ng-init 不是很常見。您將在控制器一章中學習到一個更好的初始化資料的方式。
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD8AAAAdCAIAAACSWSO1AAAA9ElEQVRYhe2W0RXDIAhF2cd53Md5nMd9yEebHlMRRUhoz/F9KpGLPomA/yzwBlBp0/tp0/uJoAegS+qNt1NMpK1mQXmg36L/IhjStMHPFGCQg9x4GX1JAU7FLEhN0vQ0pBedmBpefWvrqqS35VSOIuR6fRKIDmXpma8GNeS4sOvvxScpyfGWm3NOjgAQUrmuUbtGXMG670nDrPkeET9lPOp7NKNHfB2Psuf0yGZilPSYowE9A8E3Fj39unN4K/c6oxl9SaG51LzG9MPZmaoQOz2nbjlC9At9m5vvOWL6G2T2zln90epS353gVm16P216P216Px0p+sZKKgAw0AAAAABJRU5ErkJggg==" alt="" />
AngularJS 字串
<!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>
使用 ng-bind 的相同例項：
<!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>
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHoAAAAgCAIAAABSLvsiAAABxUlEQVRoge2XXRbEEAyF7cd67Md6rMd+zIPSkPgZzcmcM8196qQEnzuhJqkEZX49gXdJcYtKcYtKcYtKcYuKxm0MESeDB23eLMUtqjXu+rxEaShxTfQ/xIb7+A+RUkrB3ftjfZy2c2ErJZUa6MssXGpwkN7c8WxtiYPbCm6OuoA7ABW9hf2it79CPrNkB3Hk37PKgxS9neNG2L5K3fXLe7cYj18L3CTKWTrK5nuSxX0Bl+a9djeOLzJOms2W2OEu/3jY4cLWFYNc0GcVgsSdO5QoNVwbZ9kZTtxkWd8WxN0/Xz+utVsfa6mvJyEMUqnxPtx7PxguRW+b8PNiTx96CZWU5VE50d5MwJq7C0hdKlxzbU4GceqJu0fDoUvNc4MP3U0yxZEKdIT1ADeiU0zbkyX3gPDgvHYPhwuOvbazfVWy4AbVGAIo9mPEnZ2bY6PhDm75Kz1y987bJe6y2ODutTXHGG37B7jRqToYrqnjKQXHX0zM+ObHgJu6mdSzv8WErwrgVAz3S0ME4Qj0VyUCN7qZgO4cRl8ApaZ61+uzlm8WG4std79eykJUiltUiltUiltUiltUiltUiltUiltUiltUiltUH8uP4BhHocgiAAAAAElFTkSuQmCC" alt="" />
AngularJS 物件
<!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'}">//參考Json寫法 <p>姓為 {{ person.lastName }}</p> </div> </body>
</html>
使用 ng-bind 的相同例項：
<!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>
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFcAAAAYCAIAAAAApPaCAAABOUlEQVRYhe2WURYDEQxF7cd67Md6rMd+0g+lRIQJ09Ee76snyXTkzhMUHAGopxewhQ4FAIaCUkSKDIrL9tEaCij+nxTSb6Y9sv5X9CAFZxQl4waeXSy83HpVZJDvc9wL3uq8b2/1IyQ6+zxRQHFU3FXr9YgCQLSItl7WkEh9CletXtdco/Dm8FUMQ16o49w/TlMI+yJG4y7BZD7xeWB3URh0EEkhM4O3OjXprU4de6uL8OQg4S4FaF+MbHWyebkXnCmyqbo6XibtwDVzydt1gZhCskKVdSYknFk7N1beoEcMgtQ8I0LMmfLYjN5AHpnWMi/IUr37QjEosyGRzwgAZ9bvCGawCb52O0vfHat+WmdE9vi0LfpfmxyN+YDk0XRHyQ6aXaJsUuym31jl3ToUAA6FoEMB4FAIegG7hQlCU3Y+7wAAAABJRU5ErkJggg==" alt="" />
AngularJS 陣列
<!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];points1=[{name:'1',country:'a'},{name:'2',country:'b'},{name:'3',country:'c'}]"> <p>第三個值為 {{ points[2] }}---{{points1[2].name}}</p> </div> </body>
</html>
使用 ng-bind 的相同例項：
<!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>
AngularJS 表示式 與 JavaScript 表示式
類似於 JavaScript 表示式，AngularJS 表示式可以包含字母，操作符，變數。
與 JavaScript 表示式不同，AngularJS 表示式可以寫在 HTML 中。
與 JavaScript 表示式不同，AngularJS 表示式不支援條件判斷，迴圈及異常。
與 JavaScript 表示式不同，AngularJS 表示式支援過濾器。