Skip to main content
 首页 » 编程设计

AngularJS 表达式

2022年07月19日28findumars

1.  AngularJS使用表达式把数据绑定到HTML。

2.  AngularJS表达式的特点:

  • 表达式写在双大括号内:{{表达式}}。
  • 表达式把数据绑定到HTML,这与ng-bind指令有异曲同工之妙。
  • 在表达式书写的位置输出数据。
  • AngularJS表达式很像javascript表达式,它们可以包含文字、运算符和变量。

3.  第一个AngularJS表达式:要注意的是如果我们只导入了angular.js文件,但是没有使用ng-app这个指令,那么{{}}里面的表达式是没有效果的,页面上会把这是我的第一个AngularJS表达式:{{5+5}}这个整体显示。

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title></title> 
        <script type="text/javascript" src="js/angular.min.js" ></script> 
    </head> 
    <body ng-app=""> 
        <p>这是我的第一个AngularJS表达式:{{5+5}}</p> 
    </body> 
</html>

4.  AngularJS表达式中的数字:

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title></title> 
        <script type="text/javascript" src="js/angular.min.js" ></script> 
    </head> 
    <body ng-app=""> 
        <div ng-init="quantity=1;cost=5"></div> 
        <p>总价:{{quantity*cost}}</p> 
    </body> 
</html>

5.  AngularJS表达式中的字符串:

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title></title> 
        <script type="text/javascript" src="js/angular.min.js" ></script> 
    </head> 
    <body ng-app=""> 
        <div ng-init="firstname='王';lastname='甘林'"></div> 
        <p>姓名:{{firstname+lastname}}</p> 
    </body> 
</html>

6.  AngularJS表达式中的对象:

<!DOCTYPE html> 
<html> 
 
    <head> 
        <meta charset="UTF-8"> 
        <title></title> 
        <script type="text/javascript" src="js/angular.min.js"></script> 
    </head> 
 
    <body ng-app=""> 
        <div ng-init="person={firstName:'王',lastName:'甘林'}"> 
            <p>名为:{{ person.lastName }}</p> 
        </div> 
    </body> 
</html>

7.  AngularJS表达式中的数组:

<!DOCTYPE html> 
<html> 
 
    <head> 
        <meta charset="UTF-8"> 
        <title></title> 
        <script type="text/javascript" src="js/angular.min.js"></script> 
    </head> 
 
    <body ng-app=""> 
        <div ng-init="points=[1,3,5,7,9]"> 
            <p>第三个值为:{{ points[2] }}</p> 
        </div> 
    </body> 
</html>

8.  AngularJS表达式与javascript表达式的区别:

  • 与 JavaScript 表达式不同,AngularJS 表达式可以写在 HTML 中。
  • 与 JavaScript 表达式不同,AngularJS 表达式不支持条件判断,循环及异常。
  • 与 JavaScript 表达式不同,AngularJS 表达式支持过滤器。

本文参考链接:https://www.cnblogs.com/wgl1995/p/6255748.html