AngularJS 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

AngularJS表达式


AngularJS框架的核心功能之一 —— 数据绑定,由两个花括号{{}}组成,可以把数据绑定到HTML,类似Javascript代码片段,可以包含文字、运算符和变量,通常在绑定数据中用到,表达式可以绑定数字、字符串、对象、数组,写在双大括号内:{{ expression }}。

  1. 如前面的示例,我们就可以使用表达式这样调用初始化的变量值,如下。
<div ng-app="" ng-init="name='Hello World'">
  {{ name }}
</div>
  1. 当然我们也可以使用表达式输出数字、数组等等,如下所示:

2.1. 输出数字,如下示例:

<div ng-app="" ng-init="quantity=12;price=5">

总价: {{ quantity * price }}

</div>

2.2. 输出对象,如下示例:

<div ng-app="" ng-init="names=['Tom','Jerry','Gaffey']">

名字为: {{ names[0] }}

</div>

后面我们还会学习另一种数据绑定的方式 —— 通过指令ng-bind来实现,继续加油吧!