AngularJS 表达式

最新推荐文章于 2021-09-13 22:59:21 发布

原创最新推荐文章于 2021-09-13 22:59:21 发布 · 417 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs

AngularJS学习专栏收录该内容

9 篇文章

订阅专栏

本文介绍了AngularJS表达式的使用方式，包括基本语法、数值运算、字符串处理、对象及数组的操作等，并通过实例展示了如何在HTML中嵌入AngularJS表达式进行数据绑定。

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/