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

相关阅读:
文件操作:Directory,File,FielStream、StreamRead和StreamWriter的使用
 MVC中Excel导入
 T对象序列化后T对象中属性字段不见了？
Sql游标
 Form表单提交
 AJAX异步删除操作
 数据库表结构导出sql语句
 多线程的使用
 找不到dll原因
 代码优化

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

AngularJS 学习 （二）数据绑定

AngularJS 学习（二）数据绑定