AngularJS框架
本人是个新手,写下博客用于自我复习、自我总结。
如有错误之处,请各位大佬指出。
学习资料来源于:尚硅谷
AngularJS介绍
jQuery是JS的函数库,主要用来封装简化DOM操作。而AngularJS是Google开源的前端JS结构化框架,它的主体不再是DOM,而是页面中动态的数据。学习它可为后续学习React和VUE框架打下良好基础。
AngularJS做什么项目? 它用来构建单页面(SPA)Web应用或Web App应用。
单页面应用(SPA):single page application 特点:
- 将所有的活动局限于一个页面。
- 当页面中有部分数据发生了变化不会去刷新整个页面,而是局部刷新。
- 利用的ajax技术。
AngularJS特性和优点:
- 双向数据绑定
- 声明式依赖注入
- 解耦应用逻辑, 数据模型和视图
- 完善的页面指令
- 定制表单验证
- Ajax封装
用到的资源:
接下来用到的是Angular1.x的版本,它也有2.x和4.x版本,4.x只是在2.x的基础上添加了一些很小的部分。选择1.x版本是因为,它的语法是JS,而2.x和4.x的语法是typescript。
第一个Angular程序
先看用jQuery实现的:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="name">
<p>
您输入的内容是:<span id="contentSpan"></span>
</p>
<script type="text/javascript" src="../../js/jquery/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function() {
$('#name').keyup(function() {
var name = this.value;
$('#contentSpan').html(name);
})
})
</script>
</body>
</html>
Angualar实现的:(可以明显看出比jQuery还精简)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app>
<input type="text" ng-model="username">
<p>
您输入的内容是:<span>{{username}}</span>
</p>
<script src="../../js/angular-1.2.29/angular.js"></script>
</body>
</html>
说明:
- ng-app(指令) : 告诉angular核心它管理当前标签所包含的整个区域,并且会自动创建
$rootScope
根作用域对象 - ng-model : 将当前输入框的值与谁关联(属性名:属性值), 并作为当前作用域对象
($rootScope)
的属性 - {{}} (表达式) : 显示数据,从作用域对象的指定属性名上取
1、表达式:通常有一个返回值,可以放在任何需要值的地方,比如函数调用的参数,一个变量名,一个运算。
2、语句:通常表示一个完整的执行单位,一段完整的js可执行的代码,有的语句也可以用表达式来执行,叫做表达式语句。
3、区别:语句用分号结尾,有些语句我们没有加分号,比如console.log虽然我们没有加分号,但也是语句,因为js引擎会自动解析并且加上分号。
四个重要概念
1. 双向数据绑定
- 数据绑定: 数据从一个位置自动流向另一个位置(这个操作由框架来完成)
- View–>Model
- Model–>View
- View(视图): 也就是我们的页面(主要是Angular指令和表达式)
- Model(模型):作用域对象(当前为$rootScope), 它可以包含一些属性或方法
- 单向数据绑定: 只支持一个方向
- View–>Model : ng-init
- Model–>View : {{name}}
- 双向数据绑定:数据可以从View(视图层)流向Model(模型),也可以从Model流向View。
- Model<–>View : ng-model
- angular是支持双向数据绑定的
说明:
- 当改变View中的数据, Model对象的对应属性也会随之改变:
ng-model
指令 数据从View==>Model - 当Model域对象的属性发生改变时, 页面对应数据随之更新:
{{}}
表达式 数据从Model==>View ng-model
是双向数据绑定, 而{{}}
是单向数据绑定ng-init
用来初始化当前作用域变量。
现在通过该例应该对第一个AngularJS的程序的结构和用法有所了解了。也就是说:
通过设置ng-app(指令)
,它就会帮我们自动创建一个$rootScope
根作用域对象。
通过设置ng-model
就可以将当前输入框的值当作新的属性值,传给对应的属性名(它是当前作用域对象($rootScope)
的属性),从而修改这个属性名的属性值。
通过设置ng-init
可以用来初始化当前作用域变量。
当我们想使用这个属性值的时候,使用{{属性名}}
就可以显示数据。当然是从作用域对象的指定属性名上取。
当代码运行起来的时候,就会发现因为设置了ng-init
,所以输入框和输出结果都会显示这个初始值。这其中,我们无法通过修改输出结果,即{{属性名}}
来修改属性值,所以它是单向数据绑定(只能从Model流向View)。而我们显然可以通过修改输入文本框来修改属性值,即View流向Model(从页面上输入送到了作用域对象),所以ng-model
是双向数据绑定(即能显示属性值,又能修改属性值)。而ng-init
的值的变化也只能依靠其他方法的修改,所以它也是单向数据绑定(只能从View流向Model)。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>02_(双向)数据绑定</title>
</head>
<body ng-app="" ng-init="name='tom'">
<input type="text" ng-model="name">
<p>姓名1:{{name}}</p>
<input type="text" ng-model="name">
<p>姓名2:{{name}}</p>
<script type="text/javascript" src="../../js/angular-1.2.29/angular.js"></script>
</body>
</html>
2. 依赖注入
- 依赖对象:完成某个特定的功能需要某个对象才能实现,这个对象就是依赖对象。
- 依赖对象会被别人(调用者)自动注入进入,注入的方式;
- 内部自建:不动态
- 全局变量:污染全局环境
- 形参:这种最好
- 依赖注入:依赖的对象以形参的形式被注入进来使用,这种方式就是依赖注入。
- angular的 ‘$scope’对象就是依赖对象,并且是依赖注入的形式进行使用。
- 形参名不能随便定义。形参必须是特定的名称, 否则Angular无法注入抛异常
(只是针对当前这种写法) - 再比如,回调函数的event就是依赖对象,回调函数有形参就是依赖注入。
说明:在接下来的代码中,涉及到控制器对象。它是用来控制AngularJS应用数据的实例对象,是我们View与Model之间的桥梁。当我们使用了ng-controller
指令,我们需要指定控制器的构造函数,这个形参必须是$scope
。这里$scope
就是依赖对象,被angular动态注入。然后Angular就会自动new此函数创建控制器对象。每定义一个ng-controller
指令, 内部就会创建一个新的作用域对象($scope
), 并自动注入构造函数中,在函数内部可以直接使用$scope
对象。这就是依赖注入。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="">
<!--
* 依赖对象:完成某个特定的功能需要某个对象才能实现,这个对象就是依赖对象。
* 依赖注入:依赖的对象以形参的形式被注入进来使用,这种方式就是依赖注入。
* angular的 ‘$scope’对象就是依赖对象,并且是依赖注入的形式进行使用。
!!!形参必须是特定的名称, 否则Angular无法注入抛异常
-->
<div ng-controller="MyController">
<input type="text" placeholder="姓" ng-model="firstName">
<input type="text" placeholder="名" ng-model="lastName">
<p>输入的姓名为: {{firstName+'-'+lastName}}</p>
<p>输入的姓名2为: {{getName()}}</p>
</div>
<div>
{{firstName}}
<!--不能显示-->
</div>
<script type="text/javascript" src="../../js/angular-1.2.29/angular.js"></script>
<script type="text/javascript">
function MyController($scope) {//必须是$scope, $scope就是依赖对象, 被angular动态注入的
$scope.firstName = 'KB';
$scope.lastName = 'Brent';
//给域对象指定方法
$scope.getName = function() {
return $scope.firstName + " " + $scope.lastName;
};
//声明式和命令式的区别
//1.命令式:命令程序执行的时候每一步都是按照自己的指令,更注重执行的过程
//2.声明式:更注重执行的结果。
//命令式
var arr = [ 1, 2, 3, 4, 5 ];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
var num = arr[i] * 2;
newArr.push(num);
}
console.log(newArr);
//声明式
var newArr2 = arr.map(function(item) {
return item * 2;
});
console.log(newArr2);
//命令式更注重的执行的过程
//声明式更注重的执行的结果
//声明式是对命令式的局部包装
}
</script>
</body>
</html>
3. MVC模式
- M: Model, 即模型, 在angular中:
- 为scope
- 储存数据的容器
- 提供操作数据的方法
- V: View, 即视图, 在angular中:
- 为页面
- 包括: html/css/directive/expression
- 显示Model的数据
- 将数据同步到Model
- 与用户交互
- C: Controller, 即控制器, 在angular中:
- 为angular的Controller
- 初始化Model数据
- 为Model添加行为方法
4. MVVM模式
- M: Model, 即数据模型, 在angular中:
- 为scope中的各个数据对象
- V: View, 即视图, 在angular中:
- 为页面
- VM: ViewModel, 即视图模型, 在angular中:
- 为scope对象
- 在angular中controller不再是架构的核心,在MVVM中只是起辅助作用,用来辅助$scope对象,即VM层
三个重要对象
1. 作用域对象
- 一个js实例对象,ng-app指令默认会创建一个根作用域对象(
$rootScope
) - 这个对象的属性、方法, 页面都可以直接引用、操作
2. 控制器对象
- 用来控制AngularJS应用数据的实例对象,是我们View与Model之间的桥梁
- 当我们使用了
ng-controller
指令,我们需要指定控制器的构造函数(必须定义一个$scope
的形参),然后Angular就会自动new此函数创建控制器对象 - 每定义一个
ng-controller
指令, 内部就会创建一个新的作用域对象($scope
), 并自动注入构造函数中,在函数内部可以直接使用$scope
对象
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="" ng-init="age=12">
<!--
1. 作用域对象 :
* 一个js实例对象, ng-app指令默认会创建一个根作用域对象($rootScope)
* 它的属性和方法与页面中的指令或表达式是关联的
2. 控制器:
* 用来控制AngularJS应用数据的 实例对象
* ng-controller : 指定控制器构造函数, Angular会自动new此函数创建控制器对象
* 同时Angular还有创建一个新的域对象$scope, 它是$rootScope的子对象
* 在控制器函数中声明$scope形参, Angular会自动将$scope传入
-->
<div ng-controller="MyController">
<input type="text" placeholder="姓" ng-model="firstName">
<input type="text" placeholder="名" ng-model="lastName">
<p>输入的姓名为: {{firstName+'-'+lastName}}</p>
<p>输入的姓名2为: {{getName()}}</p>
</div>
<div>
{{firstName}}
<!--不能显示-->
</div>
<script type="text/javascript" src="../../js/angular-1.2.29/angular.js"></script>
<script type="text/javascript">
function MyController($scope) {//必须是$scope
// alert(this instanceof MyController);//说明是new调用
$scope.firstName = 'KB';
$scope.lastName = 'Brent';
//给域对象指定方法
$scope.getName = function() {
return $scope.firstName + " " + $scope.lastName;
};
console.log($scope.age);
}
</script>
</body>
</html>
3. 模块对象 ※
- 也是一个对象
- 创建模块对象:
angular.module('模块名', [依赖的模块])
如:var module = angular.module('模块名',[]);
(只要不涉及第三方模块,[]
里就不用添加任何东西) - 通过模块添加控制器:
module.controller('MyController', function($scope){//操作$scope的语句})
- angular的整体设计也是多模块的
- 核心模块: angular.js
- 扩展模块: angular-router.js, angular-message.js, angular-animate.js
说明:
在上段代码中,要生成作用域对象,是需要提前构造一个构造函数的,开发中不这么用,同时新版本也不支持这么用,所以现在选择模块对象。(这里选用angular-1.5.5版本)
angular.module
可在全局位置创建、注册、获取Angular模块。所有模块(angular核心或第三方)都必须使用这个机制注册才能在应用中生效。
当我们获取到了模块,就可以通过module.controller('MyController', function($scope){//操作$scope的语句})
的方式来添加控制器了。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="MyApp">
<div ng-controller="MyCtrl">
<input type="text" ng-model="empName">
<p>员工名:{{empName}}</p>
</div>
<div ng-controller="MyCtrl1">
<input type="text" ng-model="empName">
<p>员工:{{empName}}</p>
</div>
<script type="text/javascript" src="../../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript">
// console.log(angular,typeof angular);
// //创建当前应用的模块对象
// var module = angular.module('MyApp',[]);
// module.controller('MyCtrl',function ($scope) {
// $scope.empName = 'Tom';
// });
// module.controller('MyCtrl1',function ($scope) {
// $scope.empName = 'Jack';
// })
//方法链调用
// angular.module('MyApp',[])//模块对象的方法执行完返回的就是模块对象本身
// .controller('MyCtrl',function ($scope) {//$scope写法问题(js代码压缩时会把所有的局部变量压缩成abcd等)
// $scope.empName = 'Tom';
// }).controller('MyCtrl1',function ($scope) {
// $scope.empName = 'Jack';
// })
/*
上面写法的问题:
1、形参只能写固定的变量名$scope;
2、一旦文件压缩,将不能使用,会报错。
*/
//改进
angular.module('MyApp', [])
.controller('MyCtrl',[ '$scope', function(a) {
a.empName = 'tom'
} ])
.controller('MyCtrl1', [ '$scope', function(b) {
b.empName = 'Jack';
} ])
</script>
</body>
</html>
两个页面语法
1. 表达式 ※
- 语法:
{{js表达式}}
- 作用: 从作用域对象中读取对应的属性数据来显示数据
- 注意: 表达式中引用的变量必须是当前域对象有的属性(包括其原型属性)
- 不支持if/for/while
- 支持三目表达式
- 它能操作的数据:
- 基本类型数据: number/string/boolean
- undefined, Infinity, NaN, null解析为空串: “”, 不显示任何效果
- 对象的属性或方法
- 数组
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="">
<!--
1. 使用Angular表达式:
* 语法: {{expression}}
* 作用: 显示表达式的结果数据
* 注意: 表达式中引用的变量必须是当前域对象有的属性(包括其原型属性)
2. 操作的数据
* 基本类型数据: number/string/boolean
* undefined, Infinity, NaN, null解析为空串: "", 不显示任何效果
* 对象的属性或方法
* 数组
-->
<p>{{1}}</p>
<p>{{'尚硅谷'}}</p>
<p>{{true}}</p>
<p>{{undefined}}</p>
<p>{{'atguigu'+3}}</p>
<p>{{4+3}}</p>
<p ng-init="a=3;b=4">{{a+b}}</p>
<p ng-init="p={name:'Tom',age:12};arr=[true, 3, 'atguigu']">{{p.name}}---{{p.age}}----{{arr[2]}}</p>
</body>
<script type='text/javascript' src="../../js/angular-1.5.5/angular.js"></script>
</html>
2. 指令 ※
- 什么是指令 : Angular为HTML页面扩展的,自定义标签属性或标签。
- 作用:与Angular的作用域对象(scope)交互,扩展页面的动态表现力。
- 常用的指令:
- ng-app: 指定模块名,angular管理的区域
- ng-model: 双向绑定,输入相关标签
- ng-init: 初始化数据
- ng-controller: 指定控制器构造函数名,内部会自动创建一个新的子作用域(外部的)
- ng-bind: 解决使用{{}}显示数据闪屏(在很短时间内显示{{}})
- ng-repeat: 遍历数组显示数据, 数组有几个元素就会产生几个新的作用域
* $index, $first, $last, $middle, $odd, $even - ng-show: 布尔类型, 如果为true才显示
- ng-hide: 布尔类型, 如果为true就隐藏
- ng-class: 动态引用定义的样式 {aClass:true, bClass:false}
- ng-style: 动态引用通过js指定的样式对象 {color:‘red’, background:‘blue’}
- ng-click: 调用作用域对象的方法(点击时) 可以传$event
- ng-mouseenter: 鼠标移入监听, 值为函数调用, 可以传$event
- ng-mouseleave: 鼠标移出监听, 值为函数调用, 可以传$event
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul{
list-style: none;
}
</style>
</head>
<!--
1. Angular指令
* Angular为HTML页面扩展的: 自定义标签属性或标签
* 与Angular的作用域对象(scope)交互,扩展页面的动态表现力
2. 常用指令(一)
* ng-app: 指定模块名,angular管理的区域
* ng-model: 双向绑定,输入相关标签
* ng-init: 初始化数据
* ng-click: 调用作用域对象的方法(点击时)
* ng-controller: 指定控制器构造函数名,内部会自动创建一个新的子作用域(外部的)
* ng-bind: 解决使用{{}}显示数据闪屏(在很短时间内显示{{}})
* ng-repeat: 遍历数组显示数据, 数组有几个元素就会产生几个新的作用域
* $index, $first, $last, $middle, $odd, $even
* ng-show: 布尔类型, 如果为true才显示
* ng-hide: 布尔类型, 如果为true就隐藏
-->
<body ng-app="myApp">
<div ng-controller="MyCtrl" ng-init="age=12">
<div>
<h2>价格计算器(自动)</h2>
数量:<input type="number" ng-model="count1">
价格:<input type="number" ng-model="price1">
<p>总计:{{count1 * price1}}</p>
</div>
<div>
<h2>价格计算器(手动)</h2>
数量:<input type="number" ng-model="count2">
价格:<input type="number" ng-model="price2">
<button ng-click="getTotalPrice()">计算</button>
<p>总计:{{totalPrice}}</p>
</div>
<!--
* ng-repeat: 遍历数组显示数据, 数组有几个元素就会产生几个新的作用域
* $index, $first, $last, $middle, $odd, $even
-->
<h3>人员信息列表</h3>
<ul>
<li ng-repeat="person in persons">
偶数行:{{$even}},奇数行:{{$odd}},中间的:{{$middle}},
最后一个:{{$last}},第一个:{{$first}},第{{$index + 1}}个,
{{person.name}}----{{person.age}}
</li>
</ul>
<!--
* ng-bind: 解决使用{{}}显示数据闪屏(在很短时间内显示{{}})
-->
<!--当使用ng-bind的时候表达式不生效-->
<p ng-bind="count2">{{'asdfdsfds'}}</p>
<p>{{count2}}</p>
<!--
* ng-show: 布尔类型, 如果为true才显示
* ng-hide: 布尔类型, 如果为true就隐藏
-->
<button ng-click="switch()">切换</button>
<p ng-show="isLike">我喜欢</p>
<p ng-hide="isLike">喜欢我</p>
</div>
<script type='text/javascript' src='../../js/angular-1.5.5/angular.js'></script>
<script type='text/javascript'>
/*
* ng-app: 指定模块名,angular管理的区域
* ng-model: 双向绑定,输入相关标签
* ng-init: 初始化数据
* ng-click: 调用作用域对象的方法(点击时)
* ng-controller: 指定控制器构造函数名,内部会自动创建一个新的子作用域(外部的)
* */
//创建模块对象
angular.module('myApp', [])
.controller('MyCtrl', ['$scope', function ($scope) {
$scope.count1 = 1;
$scope.price1 = 20;
$scope.count2 = 1;
$scope.price2 = 20;
$scope.totalPrice = $scope.count1 * $scope.price1;
$scope.getTotalPrice = function () {
$scope.totalPrice = this.count2 * this.price2;
};
$scope.persons = [
{name : 'kobe', age : 39},
{name : 'anverson', age : 41},
{name : 'weide', age : 38},
{name : 'tim', age : 40},
{name : 'curry', age : 29}
];
$scope.isLike = true;
$scope.switch = function () {
$scope.isLike = !$scope.isLike;
}
}])
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<!--
常用指令(二)
* ng-class: 动态引用定义的样式 {aClass:true, bClass:false}
* ng-style: 动态引用通过js指定的样式对象 {color:'red', background:'blue'}
* ng-click: 点击监听, 值为函数调用, 可以传$event
* ng-mouseenter: 鼠标移入监听, 值为函数调用, 可以传$event
* ng-mouseleave: 鼠标移出监听, 值为函数调用, 可以传$event
-->
<style>
.evenB {
background-color: grey;
}
.oddB {
background-color: green;
}
ul{
list-style: none;
}
</style>
<body ng-app="myApp" ng-controller="MyController">
<div style="width: 100px; height: 100px; background-color: red"
ng-mouseover="over()" ng-mouseleave="leave()" ng-style="myStyle">
</div>
<div>
<ul>
<li ng-repeat="p in persons" ng-class="{evenB:$even, oddB:$odd}">
{{p.name}}---{{p.age}}
</li>
</ul>
</div>
<script type='text/javascript' src="../../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript">
angular.module('myApp', [])
.controller('MyController',function($scope) {
$scope.over = function() {
$scope.myStyle = {
background : 'blue'
};
};
$scope.leave = function() {
$scope.myStyle = {
background : 'green'
};
};
$scope.persons = [ {
name : 'Tom',
age : 12
}, {
name : 'Tom2',
age : 13
}, {
name : 'Tom3',
age : 14
}, {
name : 'Tom4',
age : 15
}, {
name : 'Tom5',
age : 16
} ];
});
</script>
</body>
</html>
练习一:我的笔记 ※
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
textarea {
resize: none;
}
</style>
</head>
<body ng-app="noteApp" ng-controller="NoteController">
<h2>我的笔记</h2>
<textarea cols="30" rows="10" ng-model="message"></textarea>
<div>
<button ng-click="save()">保存</button>
<button ng-click="read()">读取</button>
<button ng-click="delete()">删除</button>
</div>
<p>剩余字数:{{getCount()}}</p>
<script type="text/javascript" src="../../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
app.js
angular.module('noteApp', [])
.controller('NoteController', function ($scope) {
$scope.message = '';
//定义获取剩余字数的方法
$scope.getCount = function () {
//判断输入数据的长度
if(this.message.length > 100){
$scope.message = $scope.message.slice(0, 100);
}
//返回剩余字数的个数
return 100 - $scope.message.length;
};
//定义保存的方法
$scope.save = function () {
alert('note is saved');
//将数据保存到sessionStorage中
sessionStorage.setItem('note_key', JSON.stringify($scope.message));
//将输入内容清空
$scope.message = '';
};
//定义读取的方法
$scope.read = function () {
$scope.message = JSON.parse(sessionStorage.getItem('note_key') || '[]');//对读取null做了处理
};
// 定义删除的方法
$scope.delete = function () {
$scope.message = '';
};
});
练习二:我的备忘录 ※
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-app="todoApp">
<div ng-controller="TodoControl">
<h2>我的备忘录</h2>
<div>
<input type="text" ng-model="newTodo">
<button ng-click="add()">新增</button>
</div>
<div ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.isChecked"> <span>{{todo.todo}}</span>
</div>
<button ng-click="delete()">删除选中的记录</button>
</div>
<script type="text/javascript" src="../../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
app.js
angular.module('todoApp', [])
.controller('TodoControl', function ($scope) {
//初始化数据
$scope.todos = [
{todo : '吃饭', isChecked : false},
{todo : '睡觉', isChecked : false},
{todo : '打豆豆', isChecked : false}
];
//定义添加todo的方法
$scope.add = function () {
//判断添加的内容是否为空
if(!$scope.newTodo){
alert('输入的内容不能空');
return
}
// 组合新的todo对象
var todo = {
todo : $scope.newTodo,
isChecked : false
};
// 将新的对象添加到todos中
$scope.todos.unshift(todo);
//添加完将输入的内容清空
$scope.newTodo = '';
};
//定义删除 todo 的方法
$scope.delete = function () {
//将$scope.todo的数据暂时保存
var oldTodo = $scope.todos;
//将$scope.todos的数据清空
$scope.todos = [];
//进行遍历
oldTodo.forEach(function (item, index) {
//将没被选中的todo添加到 $scope.todos 数组中
if(!item.isChecked){
$scope.todos.push(item);
}
});
}
});