1、angular表达式


angular表达式几种形式

1、{{ }}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="">
        {{5+5}}    
    </div>
</body>
</html>
10

2、表达式中的字符串

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="" ng-init="firstName='zhang';lastName='hao'">
        {{firstName+''+lastName}}    
    </div>
</body>
</html>
zhanghao

3、表达式中的对象

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="" ng-init="personal={firstName:'zhang',lastName:'hao'}">
        {{personal.lastName}}
    </div>
</body>
</html>
hao

4、表达式中的数组

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="" ng-init="personal=[1,2,3,4,5]">
        {{personal[3]}}
    </div>
</body>
</html>
4

 

posted @ 2017-10-09 10:58  张书达  阅读(175)  评论(0编辑  收藏  举报