AngularJS 学习（二）数据绑定 -

fiftyk

浏览: 23010 次
性别:
来自: 苏州

最近访客更多访客>>

iamthree

dayone

hqq517

Lovefire_

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (13)

社区版块

存档分类

AngularJS 学习（二）数据绑定

AngularJS Javascript 数据绑定

数据绑定，是基于事件的。我在学习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版在线示例

1
顶

0
踩

分享到：