AngularJS 表达式
AngularJS 使用 表达式 把数据绑定到 HTML。
- AngularJS 表达式写在双大括号内:
{{ expression }}
。 - AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。
- AngularJS 将在表达式书写的位置”输出”数据。
- AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。
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="price=1.5;count=10">
<div>
总价(price*count):{{price * count}}
</div>
</body>
</html>
使用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="price=1.5;count=10">
<div>
总价(price*count):<span ng-bind="price * count"></span>
</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="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>