AngularJS 实例（一）--数据双向绑定

最新推荐文章于 2025-09-07 01:02:55 发布

转载最新推荐文章于 2025-09-07 01:02:55 发布 · 106 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3229047/blog/841423

文章标签：

#python #javascript #ViewUI

本文介绍AngularJS中数据双向绑定的概念与实现方式，并通过实例演示如何使用AngularJS表达式进行数据展示与简单计算。

2019独角兽企业重金招聘Python工程师标准>>>

AngularJS 实例（一）--数据双向绑定

AngularJS 表达式

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

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

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

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

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

代码部分

<!DOCTYPE html>
<html>

<body>

       <div ng-app="" ng-init="first='John'">
           <p>名字 : <input type="text" ng-model="name1"></p>
           <p>名字 : <input type="text" ng-model="name2"></p>
           <h1>Hello {{name}}</h1>
           <p>姓名1:<span ng-bind="name1*name2"></span></p>
           <p>姓名:{{first}}</p>
           <p>{{4+4}}</p>
       </div>

</body>

</html>

转载于:https://my.oschina.net/u/3229047/blog/841423