AngularJS-02 数据绑定和表达式
AngularJS----数据绑定和表达式
1.表达式是AngularJS模板引擎的重要内容,也是视图View的必要组成部分,用来将模型动态转换为可视DOM元素或者其内容。
表达式的形式:
1)常量:{{‘hello,world’}},{{123}},{{true}},{{[1,2,3,’aaa’]}}
注意:使用常量的形式,不能使用对象{{{a:’aaa’}}}
2)变量(重要):{{aaa}}
3)函数(重要):{{fn()}}
4)表达式:{{a+b}},{{a&&b}},{{true?1:2}}
注意:条件语句不能在表达式中使用(如:if(){}else{},switch,while(){})
模型声明的几种形式:
1)$scope.a = ‘hello,world’
2)ng-init=”a” --不推荐:model和view之间产生耦合
3)ng-model -- 双向数据绑定
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="KunShan Online retailers ">
<title></title> <link rel="stylesheet" href="css/angular-csp.css" />
</head>
<body ng-app="APP"> <div ng-controller='myController' ng-init=" name='zq' ">
<div>{{num}}</div>
<button ng-click='add()'>add</button> <div>{{name}}</div>
<button ng-click='add1()'>Say hello</button>
</div> <div ng-controller='controller2' ng-init=" a=123;b='zq';c=false"><!--ng-init-->
<h2>{{fn(a,b)}}</h2>
<h3>{{c?'true11':'false22'}}</h3>
<h4>{{a||b}}</h4>
</div> <script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/Angular02.js" ></script> </body>
</html>
var app = angular.module('APP',[]);//创建的模块赋值给app对象 app.controller('myController',function($scope){ $scope.num=123;//视图中的num变量 $scope.add=function(){//add方法 视图中的add()
$scope.num--;
} $scope.add1=function(){
$scope.name=$scope.name+'hello!';
}
}); app.controller('controller2',function($scope){ $scope.fn=function(a,b){
return a+b;
}; });
2.数据绑定
将模型Model和视图View关联起来,双方的改变都能影响到对方。
数据绑定类型:
1)单向数据绑定:模型能够影响视图,反之则不行
a) 简写形式:{{abc}}.
b) 指令形式:
i.ng-bind:是简写形式的替代,最佳实践是在首页使用ng-bind,其他页面使用简写形式。
ii.ng-checked:常用于radio和checkbox类型的表单元素。
iii.ng-class:指令允许你动态设置HTML元素的CSS类,通过绑定到一个包含要添加的所有类的表达式
iv.ng-hide/ng-show:是否显示/隐藏HTML元素
v.ng-if:也能控制元素隐藏和显示,但是是删除或添加dom而非隐藏
vi.ng-readonly=”xx”:是否只读
vii.ng-selected:是否选择,主要用于select下拉列表
viii.ng-src:用于设置img元素图片url
ix.ng-value:设置输入框的值
x.ng-style:动态设置样式
2)双向数据绑定:模型和视图可以相互影响
a) ng-model=”xx” --不需要在控制器中声明,Angular会自动帮你声明!
数据绑定示意图
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="KunShan Online retailers ">
<title></title> <link rel="stylesheet" href="css/angular-csp.css" />
<style>
.red{ color: red;}
.blue{color: blue;}
</style>
</head>
<body> <div id="main" ng-app="APP"> <div ng-controller='controller1'> <!--单向数据绑定-->
<h1 ng-bind="a"></h1>
<input type="radio" ng-checked="radioCheck" />
<input type="checkbox" ng-checked="checkboxCheck" ng-change="show()" ng-model="ttt" /> <!--双向数据绑定-->
<input type="text" ng-model="username" name="username" id="username" ng-change="usernameChange()" />
<h1>{{username}}</h1> <!--单向数据绑定和双向数据绑定,实现全选-->
<table>
<tr><td>全选 <input type="checkbox" ng-model="allchecked" /> </td><td>姓名</td></tr>
<tr><td><input type="checkbox" ng-checked="allchecked" ng-model="cb1" /></td><td>22</td></tr>
<tr><td><input type="checkbox" ng-checked="allchecked" ng-model="cb2"/></td><td>33</td></tr>
<tr><td><input type="checkbox" ng-checked="allchecked" ng-model="cb3"/></td><td>44</td></tr>
</table>
<h3>{{cb1}}</h3>
<h3>{{cb2}}</h3>
<h3>{{cb3}}</h3> <!--ng-class-->
<div>
<input type="checkbox" ng-model="classCheck" ng-change="classShow()" />
<span ng-class="myClass">2222222222222</span>
</div> </div> </div> <script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/Angular03.js" ></script> </body>
</html>
var app = angular.module('APP',[]);//创建的模块赋值给app对象 app.controller('controller1',function($scope){ //***
$scope.a=222; $scope.radioCheck=true;
$scope.checkboxCheck=false; $scope.show=function(){
console.log($scope.checkboxCheck);
}; $scope.usernameChange=function(){
console.log($scope.username);
} $scope.allchecked=false; $scope.classCheck=false;
$scope.myClass="red"; $scope.classShow=function(){
if($scope.classCheck){
$scope.myClass="blue";
}else{
$scope.myClass="red";
}
}
});
3.绑定表达式可以使用$watch的方式来监控
$scope.$watch(‘expression’,function(to,from){....})
优点:可以动态构造监视的表达式,这是写在view中的表带不能实现的。
例子:
($scope.$watch的第一个参数是要监听的变量数据,回调函数里边的第一个参数是新数据,第二个参数是旧数据。如果监听的变量数据是一个对象,那么$scope.$watch还需要加入第三个参数true。)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="KunShan Online retailers ">
<title></title>
<link rel="stylesheet" href="css/angular-csp.css" /> <style type="text/css">
.ng-cloak{display:none;}
</style> </head>
<body ng-app="app" ng-controller="ctrl" ng-cloak class="ng-cloak"> <input type="text" ng-model="data1" />{{error1}}
<input type="text" ng-model="data2.title">{{error2}} <script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/0121.js"></script>
</body>
</html>
var app = angular.module('app',[]);//创建的模块赋值给app对象 app.controller('ctrl',function ($scope) { $scope.data1 = 'zym';
$scope.$watch('data1', function(n, o){
console.log(n);//to
console.log(o);//from
$scope.error1 = n.length>3 ? '最多3个字' : '';
}) $scope.data2 = {'title':'zym'};
$scope.$watch('data2', function(n, o){
console.log(n);
$scope.error2 = n.title.length>3 ? '最多三个字' : '';
}, true); })
最新文章
- Invoke的使用情景
- 07@Pattern_Note_命令模式
- sqlserver 性能优化常用方法
- mysql从零开始
- 【转载】Pyqt QSplitter分割窗口
- ABBYY如何使用电子邮件发送OCR结果
- Bootstrap系列 -- 38. 基础导航条
- SVN删除同名文件夹
- js部分---运算符,if分支语句,for循环;switch case 的用法;
- SVN常见错误两项纪录
- 最简单的基于FFmpeg的内存读写的例子:内存播放器
- 【转】TEA、XTEA、XXTEA加密解密算法(C语言实现)
- MyBatis sqlsession 简化 使用工具类创建
- 那些天使用AWS填过的坑和注意事项
- 谈谈tmpdir与innodb_tmpdir的区别和用处
- 静默安装/ 普通安装与root权限获取相关
- Could not load conf for core new_core 解決方法
- iOS笔记之UIKit_UINavigationController
- UITableView:可展开的 UITableView
- MySQL-ALTER TABLE命令学习[20180503]