脚本宝典收集整理的这篇文章主要介绍了js实例教程-AngularJS双向数据绑定详解，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
数据绑定是AngularJS框架在视图(DOM元素)与作用域之间建立的数据同步机制。所谓“双向”，是指界面的操作能够实时同步到作用域中，作用域中的数据修改也能够实时回显到界面中
二、ng-model指令
ng-model指令是AngularJS的一个内置指令，该指令只能用在表单元素上，如：
<input tyPE="text" name="uname" ng-model="uname"/>
在input输入框上添加了ng-model指令后，AngularJS框架就会在对应的作用域中创建一个uname属性和该输入框进行绑定
如下例：把用户在表单中输入的信息动态回显到页面中
--------------------------------------------------------------------------------------------------------------------
<!DOCTYPE htML>
<html ng-app>
<head>
<tITle>angularjs</title>
<script type="text/javascript" src="./angular-1.6.9/Angular.js">
</script>
</head>
<body>
<p>用户名：<input type="text" ng-model="uname"/></p>
<p>{{uname}}</p>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------
当AngularJS遇到ng-app指令时会创建一个名为$rootScope的作用域，该作用域为AngularJS应用的根作用域，作用域其实是一个简单的javascript对象，形式如：
VAR $rootScope={name:'caiciacai'}
当我们把ng-model指令作为属性添加到input标签中，此时AngularJS会在$rootScope作用域中添加一个uname属性和input输入框绑定
在本例子中，我们向$rootScope作用域中添加属性进行了数据绑定，会造成全局作用域污染，实际项目中会把表单和控制器作用域中的属性进行数据绑定。控制器作用域是根作用域$rootScope的子作用域
三、ng-bind指令
ng-bind指令是和数据绑定相关的另一个指令，其作用是实现作用域到视图的单项数据绑定，和表达式功能类似，可用于向界面中输出作用域中的数据
--------------------------------------------------------------------------------------------------------------------
<p>{{uname}}</p>
可替换为
<p ng-bind="uname"></p>
<p class="ng-bind:uname"></p>
--------------------------------------------------------------------------------------------------------------------
表达式与ng-bind之间的区别：使用表达式{{name}}时，如果遇到网络问题(如网络延迟)，导致AngularJS加载缓慢，浏览器会把整个表达式当成字符串渲染到页面中，而ng-bind指令在AngularJS没有加载完毕前是不会解析执行的，所以推荐使用ng-bind。但在需要进行运算处理或者使用过滤器对输出内容进行处理时，则必须使用表达式
四、数据绑定实例：价格计算器
--------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html ng-app>
<head>
<;meta charset="utf-8">
<title>angularjs</title>
<script type="text/javascript" src="./angular.min.js"></script>
</head>
<body>
<p>单价：<input type="number" ng-model="PRice"/></p></br>
<p>数量：<input type="number" ng-model="num"/></p></br>
<p>总价：{{price*num}}</p>
</body>
</html>
一、AngularJS双向数据绑定
数据绑定是AngularJS框架在视图(DOM元素)与作用域之间建立的数据同步机制。所谓“双向”，是指界面的操作能够实时同步到作用域中，作用域中的数据修改也能够实时回显到界面中
二、ng-model指令
ng-model指令是AngularJS的一个内置指令，该指令只能用在表单元素上，如：
<input type="text" name="uname" ng-model="uname"/>
在input输入框上添加了ng-model指令后，AngularJS框架就会在对应的作用域中创建一个uname属性和该输入框进行绑定
如下例：把用户在表单中输入的信息动态回显到页面中
--------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html ng-app>
<head>
<title>angularjs</title>
<script type="text/javascript" src="./angular-1.6.9/angular.js">
</script>
</head>
<body>
<p>用户名：<input type="text" ng-model="uname"/></p>
<p>{{uname}}</p>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------
当AngularJS遇到ng-app指令时会创建一个名为$rootScope的作用域，该作用域为AngularJS应用的根作用域，作用域其实是一个简单的javascript对象，形式如：
var $rootScope={name:'caiciacai'}
当我们把ng-model指令作为属性添加到input标签中，此时AngularJS会在$rootScope作用域中添加一个uname属性和input输入框绑定
在本例子中，我们向$rootScope作用域中添加属性进行了数据绑定，会造成全局作用域污染，实际项目中会把表单和控制器作用域中的属性进行数据绑定。控制器作用域是根作用域$rootScope的子作用域
三、ng-bind指令
ng-bind指令是和数据绑定相关的另一个指令，其作用是实现作用域到视图的单项数据绑定，和表达式功能类似，可用于向界面中输出作用域中的数据
--------------------------------------------------------------------------------------------------------------------
<p>{{uname}}</p>
可替换为
<p ng-bind="uname"></p>
或者
<p class="ng-bind:uname"></p>
--------------------------------------------------------------------------------------------------------------------
表达式与ng-bind之间的区别：使用表达式{{name}}时，如果遇到网络问题(如网络延迟)，导致AngularJS加载缓慢，浏览器会把整个表达式当成字符串渲染到页面中，而ng-bind指令在AngularJS没有加载完毕前是不会解析执行的，所以推荐使用ng-bind。但在需要进行运算处理或者使用过滤器对输出内容进行处理时，则必须使用表达式
四、数据绑定实例：价格计算器
--------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>angularjs</title>
<script type="text/javascript" src="./angular.min.js"></script>
</head>
<body>
<p>单价：<input type="number" ng-model="price"/></p></br>
<p>数量：<input type="number" ng-model="num"/></p></br>
<p>总价：{{price*num}}</p>
</body>
</html>
觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的js实例教程-AngularJS双向数据绑定详解全部内容，希望文章能够帮你解决js实例教程-AngularJS双向数据绑定详解所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。