AngularJS 表达式对象和数组

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 表达式支持过滤器。