简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > js教程 > 正文

AngularJS 双向数据绑定详解简单实例

高洛峰
发布： 2016-12-24 10:30:18
原创
1148 人浏览过

angular的双向数据绑定，个人理解是，通过model建立数据模型，那么视图上的数据就会对应存储在angular程序里，视图上的数据变化会同步到model，model的数据改变也会同步到视图。

下面的demo演示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>hello, AngularJS!</title>
  <script src="angular.js"></script>
</head>
<body>
  <div ng-app>
    <!-- ng-model指令将表单的value绑定到model的username变量-->
    <input ng-model="username" type="text" placeholder="请输入...">
    <p>Hello, <strong>{{username}}</strong>!</p>
  </div>
</body>
</html>
登录后复制

运行结果：程序运行后，在输入框输入文字，下面会与输入框内容同步变化。是不是很惊奇！以前需要写一大段js代码的事情（监听onchange事件，将input的value赋给下面的strong元素），现在只用一个ng-model指令就完成了。Perferct!

AngularJS 双向数据绑定

案例详解：

1. ng-model指令的作用：建立数据模型，在模型中对应有一个变量username用来存放input元素的value；

2. {{username}}是一个表达式，angular会自动计算该表达式，替换成相应的值。

3. 手动输入文字，input元素的value发生变化，自动同步到model的usename变量，{{username}}是从模型中读username的值，因此下面strong元素的内容跟着变了。

同步数据是angular帮我们完成的。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

更多AngularJS 双向数据绑定详解简单实例相关文章请关注PHP中文网！


相关标签：
AngularJS 双向数据绑定
来源：php.cn
上一篇：详解JavaScript的AngularJS框架中的作用域与数据绑定 下一篇：AngularJS实践之使用NgModelController进行数据绑定
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
使用object标签嵌入跨域SVG内容文档 拥有一个包含外部域数据的SVG是否“合法”，即(data="//da86ge957603k.cloudfront.net/rails/grafitti_logo-f4e8...
来自于 2023-10-31 18:04:21
0
1
249
获取重定向目标的PHP cURL方法，而不进行跟随重定向 curl_getinfo函数返回大量有关HTTP请求结果的元数据。但是，由于某种原因，它不包含我目前想要的信息，如果请求返回HTTP重定向代码，该信息就是目标URL。我没有使用CU...
来自于 2023-10-25 08:56:01
0
1
205
如何在注销时重置Nuxt应用程序的状态？ 当用户退出应用程序时，Pinia持久的authStore状态会被重置，并且用户会被重定向到/login。然而，如果下一个用户在不刷新页面的情况下登录，主页面仍然显示上一个用户的数据...
来自于 2023-09-16 20:59:12
0
1
278
Nodejs：将非 HTML 数据返回到浏览器的正确方法？ 用户JWT作为仅HTTPcookie发送到浏览器。我的问题是，向浏览器传达显示名称和用户数据库ID等的最佳方式是什么？我知道信息可以并且确实在JWT有效负载中设置，但是使该cook...
来自于 2023-09-15 16:04:49
0
1
736
PHP身份验证后无法成功写入MySQL数据库 我正在尝试在认证后向数据库写入数据，但无法成功。一旦成功登录，我会重定向到index.php<?phpsession_start();if(isset($_SESSION[&...
来自于 2023-09-13 09:54:01
0
1
244
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！