AngularJS 表达式

最新推荐文章于 2020-01-02 14:04:43 发布

monkey_four

最新推荐文章于 2020-01-02 14:04:43 发布

阅读量343

点赞数

分类专栏： AngularJS学习文章标签： angularjs

本文链接：https://blog.csdn.net/monkey_four/article/details/51646915

版权

AngularJS学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

AngularJS表达式可以写在两对花括号中：　{{ expression }}

也可以写在指令中：ng-bind="expression"

AngularJS会解析表达式并返回表达式的结果

AngularJS表达式与JavaScript表达式非常类似，可包含字面常量，操作符以及变量等．

例1：

<!DOCTYPE html>
<html>
<script src="./angular.min.js"></script>
<body>
<div ng-app="">
<p>my first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>

结果会得到：

my first expression: 10

如果去掉ng-app=""，表达式就不会得到解析．

例2:

<DOCTYPE html>
<html>
<head>
<script src="./angular.min.js"></script>
</head
<body>
<div ng-app="">
<input style="background-color:{{myColor}}" ng-model="myColor" value="{{myColor}}">
</div>
</body>
<html>

1. AngularJS Numbers

<!DOCTYPE html>
<html>
<script src="./angular.min.js"></script>
<body>

<div ng-app="">
<input type="text" ng-model="quantity" value="{{quantity}}">
<input type="text" ng-model="cost" value="{{cost}}">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>

</body>
</html>

2. AngularJS Strings

<div ng-app="" ng-init="firstNmae='Tina';lastName='Tan'">
    <p>This name is {{ firstNmae + lastName }}</p>
</div>

3. AngularJS Objects

<div ng-app="" ng-init="person={fisrtName:'Tina', lastName:'Tan'}">
    <p>The name is {{person.lastName}}</p>
</div>

4.Angular Arrays

<div ng-app="" ng-init="points=[0,1,2,3]">
    <p>Ths first element is {{points[0]}}</p>
</div>

AngularJS表达式与JS表达式最大的不同是，前者不能包含条件句，循环，和异常．

有关AngularJS学习资料参考来源：　http://www.w3schools.com/angular/

monkey_four

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS 表达式

AngularJS表达式可以写在两对花括号中：　{{ expression }}也可以写在指令中：ng-bind="expression"AngularJS会解析表达式并返回表达式的结果AngularJS表达式与JavaScript表达式非常类似，可包含字面常量，操作符以及变量等．例1：my first expression: {{ 5 + 5 }}
复制链接

扫一扫