详解AngularJS中的表达式使用_AngularJS-js教程-PHP中文网

详解AngularJS中的表达式使用_AngularJS

php中文网

发布： 2016-05-16 15:54:41

原创

1103人浏览过

表达式用于应用程序数据绑定到HTML。表达式都写在双括号就像{{表达式}}。表达式中的行为跟ng-bind指令方式相同。 AngularJS应用表达式是纯javascript表达式，并输出它们被使用的数据在那里。
使用数字

<p>expense on books : {{cost * quantity}} rs</p>

登录后复制

使用字符串

<p>Hello {{student.firstname + " " + student.lastname}}!</p>

登录后复制

使用对象

<p>Roll No: {{student.rollno}}</p>

登录后复制

使用数组

<p>Marks(Math): {{marks[3]}}</p>

登录后复制

例子

php订单系统可以整合支付宝接口

一、系统设置：用Dreamweaver等网页设计软件在代码视图下打开【dddingdan/config.php】系统设置文件，按注释说明进行系统设置。二、系统使用：WFPHP在线订单系统是无台后的，不用数据库，也不用安装，解压源码包后，先进行系统设置，然后把整个【dddingdan】文件夹上传到服务器。在网页中要插入订单系统的位置，插入系统调用代码：注意：id=01就表示使用样式01，如果要使

查看详情

下面的例子将展示上述所有表达式。
testAngularJS.html 文件代码如下：

<html>
<title>AngularJS Expressions</title>
<body>
<h1>Sample Application</h1>
<div ng-app="" ng-init="quantity=1;cost=30; student={firstname:'Mahesh',lastname:'Parashar',rollno:101};marks=[80,90,75,73,60]">
  <p>Hello {{student.firstname + " " + student.lastname}}!</p>  
  <p>expense on books : {{cost * quantity}} rs</p>
  <p>Roll No: {{student.rollno}}</p>
  <p>Marks(Math): {{marks[3]}}</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

登录后复制

输出

在Web浏览器打开textAngularJS.html。看到结果如下：

2015616115757530.png (587×339)