AngularJS 学习（二）数据绑定

最新推荐文章于 2025-04-04 09:35:53 发布

fiftyk010

最新推荐文章于 2025-04-04 09:35:53 发布

阅读量103

点赞数

文章标签： AngularJS Javascript 数据绑定 ViewUI

本文介绍了如何使用AngularJS和jQuery实现数据绑定功能，展示了两种方法下两个输入框内容实时同步的效果。

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

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

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

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

AngularJS版在线示例

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

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <title>AngularJS学习（二）数据绑定 jQuery版</title>
    <!-- 引入jQuery -->
    <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
    <p>这里展示的是数据绑定</p>
    <input type="text" id="txt1" placeholder="输入"></input>
    <hr>
    <input type="text" id="txt2" placeholder="输入"></input>
    <hr>
    <a href="02.html">AngularJS版</a>
    <script>
        $(function(){
            var $txt1 = $("#txt1"),
            $txt2 = $("#txt2"),
            onTxt1ChangeHandler = function(){
                $txt2.val($txt1.val());
            },
            onTxt2ChangeHandler = function(){
                $txt1.val($txt2.val());
            };
            
            $("#txt1").keyup(onTxt1ChangeHandler);
            $("#txt2").keyup(onTxt2ChangeHandler);
        });
    </script>
</html>

jQuery版在线示例