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>AngularJS 表达式 与 JavaScript 表达式
- 类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
- 与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。
- 与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。
- 与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。
时间： 2024-08-02 16:18:19