AngularJS 学习（二）数据绑定

zoukankan html css js c++ java

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

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

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

<!DOCTYPE html>
<html ng-app>
<meta charset="utf-8">
<title>AngularJS学习（二）数据绑定</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<p>这里展示的是数据绑定</p>

<input type="text" ng-model="xmodel" placeholder="输入"></input>
<hr>

<input type="text" ng-model="xmodel" placeholder="输入"></input>
<hr>

Hello {{xmodel || 'World'}}!
</html>
```
<!DOCTYPE html>
<html ng-app>
    <meta charset="utf-8">
    <title>AngularJS学习（二）数据绑定</title>
    
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
    <p>这里展示的是数据绑定</p>
    
    <input type="text" ng-model="xmodel" placeholder="输入"></input>
    <hr>
    
    <input type="text" ng-model="xmodel" placeholder="输入"></input>
    <hr>
    
    Hello {{xmodel || 'World'}}!
</html>
```
AngularJS版在线示例

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

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>AngularJS学习（二）数据绑定 jQuery版</title>

<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>
查看全文

相关阅读:
流量调整和限流技术
 微软开源.NET Core的执行引擎CoreCLR{转载}
Visual Studio 2015 前端开发工作流
 基于Redis的开源分布式服务Codis
RemoteIE 开发者可跨平台使用IE测试网页
 参加MVP OpenDay 和2015 MVP Community Camp社区大课堂
 etcd：用于服务发现的键值存储系统
 Centos7下安装mono3.10.0
在 Azure 上使用 Docker运行 Mono
STOMP协议介绍

原文地址：https://www.cnblogs.com/bjanzhuo/p/3576106.html

AngularJS 学习 （二）数据绑定

AngularJS 学习（二）数据绑定