点石互动

导航

 
AngularJS 学习 （二）数据绑定

数据绑定，是基于事件的。我在学习Flex时初次见识。

具体应用比如：两个输入框，我在任意一个输入框中的修改都会同步影响到另一个。

如果我们使用AngularJS的话，非常容易：

Html代码 复制代码 收藏代码
  1. <!DOCTYPE html>
  2. <html ng-app><!-- 必须 -->
  3. <meta charset="utf-8">
  4. <title>AngularJS学习（二）数据绑定</title>
  5. <!-- 引入angularJS -->
  6. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
  7. <p>这里展示的是数据绑定</p>
  8. <!-- ng-model属性定义了一个model(模型) -->
  9. <input type="text" ng-model="xmodel" placeholder="输入"></input>
  10. <hr>
  11. <!-- ng-model属性定义了一个model(模型) 名字相同 指向同一个模型 -->
  12. <input type="text" ng-model="xmodel" placeholder="输入"></input>
  13. <hr>
  14. <!-- 双大括号里的表达式会调用model(模型)的值 -->
  15. Hello {{xmodel || 'World'}}!
  16. </html>

AngularJS版在线示例

当然我也可以使用jQuery通过事件实现这样的效果：

Html代码 复制代码 收藏代码
  1. <!DOCTYPE html>
  2. <html>
  3. <meta charset="utf-8">
  4. <title>AngularJS学习（二）数据绑定 jQuery版</title>
  5. <!-- 引入jQuery -->
  6. <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
  7. <p>这里展示的是数据绑定</p>
  8. <input type="text" id="txt1" placeholder="输入"></input>
  9. <hr>
  10. <input type="text" id="txt2" placeholder="输入"></input>
  11. <hr>
  12. <a href="02.html">AngularJS版</a>
  13. <script>
  14. $(function(){
  15. var $txt1 = $("#txt1"),
  16. $txt2 = $("#txt2"),
  17. onTxt1ChangeHandler = function(){
  18. $txt2.val($txt1.val());
  19. },
  20. onTxt2ChangeHandler = function(){
  21. $txt1.val($txt2.val());
  22. };
  24. $("#txt1").keyup(onTxt1ChangeHandler);
  25. $("#txt2").keyup(onTxt2ChangeHandler);
  26. });
  27. </script>
  28. </html>
posted on 2013-02-05 17:12  点石互动  阅读(266)  评论(0)  编辑  收藏  举报
 
Powered by:
博客园
Copyright © 2024 点石互动
Powered by .NET 8.0 on Kubernetes