AngularJS入门（2）---表达式

最新推荐文章于 2023-03-15 15:16:45 发布

weixin_43735372

最新推荐文章于 2023-03-15 15:16:45 发布

阅读量217

点赞数 1

分类专栏： AngularJS表达式文章标签： AngularJS入门（2）

本文链接：https://blog.csdn.net/weixin_43735372/article/details/84255827

版权

AngularJS表达式专栏收录该内容

1 篇文章 0 订阅

订阅专栏

AngularJS表达式

作用：把数据绑定到 HTML
书写规则：

写在双花括号里{{}}
可以包含数字、字符串、对象、数组
需要加上ng-app,否则会直接加载出关系式，而不是结果

与JS表达式的比较：

与 JS 表达式不同，AngularJS 表达式可以写在 HTML 中
与 JS表达式不同，AngularJS 表达式不支持条件判断，循环及异常
与 JS表达式不同，AngularJS 表达式支持过滤器
与JS表达式类似，AngularJS 表达式可以包含字母，操作符，变量

具体的实例
4.1数字：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app>
<p>数字表达式: {{ 5 + 5 }}</p>
</div>

</body>
</html>

使用ng-bind(具体ng-bind的内容后面介绍，这里只给出代码)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app>
<p>ng-bind数字表达式: <span ng-bind="{{5+5}}"></span></p>
</div>

</body>
</html>

数字的表达式也可以这样写,但是ng-init不常见，之后控制器中会介绍更好的初始化数据的方法：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

 <div ng-app ng-init="length=5;width=10">
        <p>面积：{{length*width}}</p>
  </div>

</body>
</html>

4.2字符串

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

 <div ng-app ng-init="firstname='张';lastname='敏'">
        <p>全名：{{firstname+lastname}}</p>
  </div>

</body>
</html>

注意给字符串赋值的时候要用引号（这里外面有双引号了，所以’张’ '敏’用单引号），两个字符串赋值之间用“；”隔开；ng-bind 的方法与上面数字类似，就不具体写出了，往后对象、数组也是一样的。
4.3对象

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app ng-init="person={firstname:'张',lastname:'敏'}">
        <p>我姓{{person.firstname}},叫{{person.lastname}}</p>
 </div>

</body>
</html>

注意所有对象属性用花括号括起来，多个对象属性之间用“，”分隔，不用“；”，给具体属性赋值时用“:”,不用“=”

4.4数组

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

 <div ng-app ng-init="students=['张敏','张森玮','谭淇蔚','梁欢欢'];number=[1,2,3,4]">
        <p>第二个同学是：{{students[1]}},第二个数字是：{{number[1]}}</p>
 </div>

</body>
</html>