#AngularJS#表达式

表达式

AngularJS 表达式写在双大括号内:{{ expression }}

AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。

AngularJS 将在表达式书写的位置"输出"数据。

AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。

实例{{ 5 + 5 }}{{ firstName + " " + lastName }}

源码

<!DOCTYPE html>
<html>
<body>

<div ng-app="">
  <p>我的第一个表达式: {{ 5 + 5 }}</p>
</div>

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>

</body>
</html>
数字

AngularJS数字就像JavaScript数字

源码

<div ng-app="" ng-init="quantity=1;cost=5">

	<p>总价: {{ quantity * cost }}</p>

</div>

使用ng-bind的相同实例:

<div ng-app="" ng-init="quantity=1;cost=5">
    <p>总价: <span ng-bind="quantity * cost"></span></p>
</div>

使用 ng-init 不是很常见。

字符串

AngularJS字符串就像JavaScript字符串

源码

<div ng-app="" ng-init="firstName='John'; lastName='Doe'">
    <p> 姓名:{{ firstName + '' + lastName }}</p>
</div>

使用ng-bind的相同实例

<div ng-app="" ng-init="firstName='Jhon'; lastName='Doe'">
    <p>姓名: <span ng-bind="fistName + '' + lastName"></span></p>
</div>
对象

AngularJS的对象就像JavaScript的对象

源码

<div ng-app="" ng-init="person={firstName: 'sujuan',lastName: 'zhou'}">
        <p>姓名为:{{person.lastName + person.firstName}}</p>
        <hr>
        <!-- ng-bind -->
        <p>姓名为:<span ng-bind="person.lastName + person.firstName"></span></p>
</div>
数组

AngularJS的数组就像JavaScript的数组

源码

<div ng-app="" ng-init="points=[1,25,36,22]">
        <p>points的第三个值是: {{points[2]}}</p>

        <hr>

        <p>points的第三个值是: <span ng-bind="points[2]"></span></p>
</div>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值