表达式和数据绑定
表达式是AngularJS模板引擎的重要内容，也是视图View的必要组成部分，用来将模型动态转换为可视DOM元素或者其内容。
表达式的形式：
- 常量：{{‘hello,world’}},{{123}},{{true}},{{[1,2,3,’aaa’]}}
注意：使用常量的形式，不能使用对象{{{a:’aaa’}}}
- 变量（重要）：{{aaa}}
- 函数(重要)：{{fn()}}
- 表达式：{{a+b}},{{a&&b}},{{true?1:2}}
注意：条件语句不能在表达式中使用（如：if(){}else{},switch,while(){}）
变量声明：
- $scope.abc = ‘abc’;
- ng-init=”” 不推荐：model和view之间产生耦合
- ng-model 双向数据绑定
数据绑定
将模型Model和视图View关联起来，双方的改变都能影响到对方。
数据绑定类型：
- 单向数据绑定：模型能够影响视图，反之则不行
- 简写形式：{{abc}}
- 指令形式：
- ng-bind:是简写形式的替代，最佳实践是在首页使用ng-bind，其他页面使用简写形式。
- ng-checked:常用于radio和checkbox类型的表单元素
- ng-class:指令允许你动态设置HTML元素的CSS类，通过绑定到一个包含要添加的所有类的表达式
- ng-hide/ng-show:是否显示/隐藏HTML元素
- ng-if:也能控制元素隐藏和显示，但是是删除或添加dom而非隐藏
- ng-readonly=”xx”:是否只读
- ng-selected:是否选择，主要用于select下拉列表
- ng-src：用于设置img元素图片url
- ng-value：设置输入框的值
- ng-style:动态设置样式
- 双向数据绑定：模型和视图可以相互影响
- ng-model=”xx”
绑定表达式可以使用$watch的方式来监控
$scope.$watch(‘expression’,function(newValue,oldValue){....})
expression：带有Angular 表达式或者函数的字符串，它会返回被监控的数据模型的当前值。
function(newValue,oldValue)：一个函数function(newValue,oldValue){},当watchFn 发生变化时会被调用
优点：可以动态构造监视的表达式，这是写在view中的表带不能实现的。
代码实例
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/angular-csp.css"/>
<title>表达式和数据绑定</title>
<style>
.red{
color:red;
}
.yellow{
color:yellow;
border:1px solid black;
}
.blue{
color:blue;
border:1px solid tomato;
}
.green{
color:green;
border:1px solid violet;
}
</style>
</head>
<!--可利用ng-init指令声明模型，不建议使用-->
<body ng-controller="myController">
<ul style="list-style: none">
<li>
<!--双向数据绑定，可以影响myClass的值，当其发生改变时，样式也跟着变化-->
<h3>一、双向数据绑定，可以影响myClass的值，当其发生改变时，样式也跟着变化</h3>
<p>请选一种喜欢的颜色：red(红)、yellow(黄)、blue(蓝)、green(绿)</p>
<label for="">输入喜欢的颜色：</label>
<input type="text" ng-model="myClass" placeholder="请输入blue或red或border"/>
<div ng-class="myClass" style="width: 600px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate iure dignissimos molestias laudantium voluptate ratione culpa consequuntur in accusantium dolorem fugit, consequatur exercitationem numquam laboriosam ad recusandae rerum dolor ipsa.</div>
</li>
<li>
<!-- 显示、隐藏、添加或删除 -->
<h3>二、ng-show的使用<input type="checkbox" ng-model="isShow" id="isShow"/></h3>
<label for="isShow" ng-show="isShow">ng-isShow决定元素是否显示Div</label>
<h3>三、ng-hide的使用<input type="checkbox" ng-model="isHide" id="isHide"/></h3>
<label for="isHide" ng-hide="isHide">ng-isHide决定元素是否隐藏Div</label>
<h3>四、ng-if的使用<input type="checkbox" ng-model="isShowByNgIf" /></h3>
<label ng-if="isShowByNgIf">ng-if决定元素显示与否，这里的显示是添加到dom树中，如果不显示则是从dom树中删除相关元素</label>
</li>
<li>
<!--单向数据绑定和双向数据绑定结合实现表格项目的全选-->
<h3>五、单向数据绑定和双向数据绑定结合实现表格项目的全选</h3>
<input type="checkbox" ng-model="allChecked"/>
<label for="全选">全选</label>
<input type="checkbox" ng-checked="allChecked" ng-model="cbChecked_0"/>
<label for="小明">小明</label>
<input type="checkbox" id="xiaohong" ng-checked="allChecked" ng-model="cbChecked_1"/>
<label for="小红">小红</label>
<input type="checkbox" ng-checked="allChecked" ng-model="cbChecked_2"/>
<label for="小飞">小飞</label>
</li>
<li>
<!--购物车商品小计列表-->
<h3>六、购物车商品小计列表</h3>
<table ng-controller="myController2">
<tr>
<td>单价</td>
<td>数量</td>
<td>小计</td>
</tr>
<tr>
<td>
<input type="text" ng-model="price1"/>
</td>
<td>
<input type="text" ng-model="count1"/>
</td>
<td align="right">{{price1*count1}}</td>
</tr>
<tr>
<td>
<input type="text" ng-model="price2"/>
</td>
<td>
<input type="text" ng-model="count2"/>
</td>
<td align="right">
{{price2*count2}}
</td>
</tr>
<tr>
<td>
<input type="text" ng-model="price3"/>
</td>
<td>
<input type="text" ng-model="count3"/>
</td>
<td align="right">{{price3*count3}}</td>
</tr>
<tr>
<td colspan="3" align="right">
总计：{{total}}
</td>
</tr>
</table>
</li>
</ul>
<script src="js/angular.js"></script>
<script src="js/index.js"></script>
<script>$(".xiaohong").checked=true</script>
</body>
</html>/**
* 使用angular.module()创建应用程序模块
* 第一个参数是模块名称
* 第二个参数是依赖模块的数组
*/
var app = angular.module('myApp',[]);
//定义控制器myController
//第一个参数是控制器名称
//第二个参数是控制器具体定义，务必添加$scope(作用域对象)
app.controller('myController', function ($scope) {
//声明myClass，用于测试ng-class的使用
$scope.myClass = 'red';
//创建变量isShow，和元素显示或隐藏挂钩
$scope.isShow = true;
//创建变量isHide，和元素显示或隐藏挂钩
$scope.isHide = false;
//创建变量isShowByNgIf，和元素添加或删除挂钩
$scope.isShowByNgIf = true;
});
//定义控制器myController2，测试控制器的嵌套
app.controller('myController2', function ($scope) {
$scope.price1 = 10;
$scope.count1 = 1;
$scope.price2 = 20;
$scope.count2 = 2;
$scope.price3 = 30;
$scope.count3 = 1;
//总价
$scope.total = 0;
//通过$watch方式监控价格总计的计算
//第一个参数：设置已声明对象
//第二个参数：设置回调函数
$scope.$watch('price1*count1+price2*count2+price3*count3', function (newVal, oldVal) {
//值发生了变化，总价作相应的处理
$scope.total = $scope.price1*$scope.count1+$scope.price2*$scope.count2+$scope.price3*$scope.count3;
})
})显示效果：
