AngularJS 表达式

发布时间：2020-12-17 10:33:28 所属栏目：安全来源：网络整理

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

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/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!