AngularJS 表达式

来源：互联网发布：手机qq当前网络不可用编辑：程序博客网时间：2024/05/29 18:26

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/

0 0