AngularJS的数据绑定表达式使用的HTML。
AngularJS表达式
AngularJS表达式可以双括号内写: {{ expression }}
AngularJS表达式也可以指令里面写: ng-bind=" expression "
。
AngularJS将解决的表达,并返回结果正是表达被写入。
AngularJS表情很像JavaScript表达式:它们可以包含文字,运算符和变量。
例如{{5 + 5}}或{{的firstName +“”+ lastName的}}
例
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
试一试» 如果您删除了ng-app
指令,HTML将显示表达式,因为它是,不解决它:
例
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
试一试» 只要你喜欢,你可以写表达式,AngularJS会简单地解析表达式并返回结果。
例如:让AngularJS改变CSS属性的值。
下面改变输入框颜色,通过改变它的价值:
例
<div ng-app="" ng-init="myCol='lightblue'">
<input
style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}">
</div>
试一试» AngularJS号
AngularJS号码的JavaScript的数字:
例
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
试一试» 使用同样的例子ng-bind
:
例
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>
试一试» 采用ng-init 是不是很常见。 你会学到更好的方式有关控制器的章节中初始化数据。 |
AngularJS字符串
AngularJS字符串如JavaScript字符串:
例
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
试一试» 使用同样的例子ng-bind
:
例
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>
试一试» AngularJS对象
AngularJS对象是一样的JavaScript对象:
例
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
试一试» 使用同样的例子ng-bind
:
例
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is <span ng-bind="person.lastName"></span></p>
</div>
试一试» AngularJS阵列
AngularJS阵列是像JavaScript数组:
例
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>
试一试» 使用同样的例子ng-bind
:
例
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is <span ng-bind="points[2]"></span></p>
</div>
试一试» AngularJS表达式与JavaScript表达式
像JavaScript表达式,AngularJS表达式可以包含文字,运算符和变量。
不同于JavaScript表达式,AngularJS表达式可以在HTML里面写。
AngularJS表达式不支持条件语句,循环和异常,而JavaScript表达式做。
AngularJS表达式支持滤镜,而JavaScript表达式没有。