AngularJS表达式-CSDN博客

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>