您的位置：首页 > Web前端 > AngularJS

AngularJS 学习 （二）数据绑定

2013-02-05 17:12 423 查看
数据绑定，是基于事件的。我在学习Flex时初次见识。

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

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

Html代码







<!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>

<!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通过事件实现这样的效果：

Html代码







<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航