AngularJS表达式

来源：互联网发布：使命召唤账号数据异常编辑：程序博客网时间：2024/05/21 08:35

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

1 0

AngularJS表达式

AngularJS 表达式

AngularJS 数字

AngularJS 字符串

AngularJS 对象

AngularJS 数组

AngularJS 表达式 与 JavaScript 表达式

AngularJS 表达式与 JavaScript 表达式