一、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>
<div>用户名:<input type="text"
ng-model="uname"
/></div>
<div>{{uname}}</div>
</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
指令是和数据绑定相关的另一个指令,其作用是实现作用域到视图的单项数据绑定,和表达式功能类似,可用于向界面中输出作用域中的数据
--------------------------------------------------------------------------------------------------------------------
<div>{{uname}}</div>
可替换为
<div
ng-bind
="uname"></div>
或者
<div class="
ng-bind
:uname"></div>
--------------------------------------------------------------------------------------------------------------------
表达式与
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>
<div>单价:<input type="number"
ng-model
="price"/></div></br>
<div>数量:<input type="number"
ng-model
="num"/></div></br>
<div>总价:{{price*num}}</div>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------
注意:这里ng-app没有赋值,ng-model的值直接绑定到全局域$rootScope的对应属性中