- 导入需要的文件（注意导入的顺序）
- 绑定title，验证关联是否成功
- 将所要展示的数据，在模型中先模拟出来
// 代办事项模拟数据
$scope.taskList = [
{content:'小草莓1',checked:false},
{content:'小草莓2',checked:false},
{content:'小草莓3',checked:false}
];
<!--展示模型数据-->
<li class="item" ng-repeat="(position,item) in taskList">
<input type="checkbox" ng-checked = "item.checked">
<span class="item_content" ng-bind="item.content"></span>
<!--注册删除事件-->
<span class="del" >删除</span>
<span class="detail">详情</span>
</li>
-
- 点击添加按钮添加数据,Angular可以实现数据双向绑定,表单中输入字符串,点击添加,加入到模型中的集合中。
- ng-submit 提交的时候调用添加的方法
- 表单中添加ng-model实现数据的双向绑定，数据是由用户输入的。
<form action="#" ng-submit="add()">
<input type="text" placeholder="请输入内容..." ng-model="task">
<input type="submit" value="添加">
</form>
- 对用户输入的数据进行处理；
- 用户输入的是字符串，将其包装成一个对象，使其与前面模拟的数据格式相同，并将其插入的模拟的数据中，使其实现添加的操作
- 提交成功后，清空表单中的数据。（初始化数组）
// 双向绑定的数据
$scope.task = "";
// 实现添加操作
$scope.add = function () {
// 先将task转化为一个json对象
var newTask = {
content:$scope.task,checked:false
};
// 将这个newTask添加到数组taskList中
$scope.taskList.push(newTask);
// 初始化该数组，使其清空
$scope.task = "";
- 删除事件处理，找到删除的按钮，注册事件（点击事件）
<ul>
<!--展示模型数据-->
<li class="item" ng-repeat="(position,item) in taskList">
<input type="checkbox" ng-checked = "item.checked">
<span class="item_content" ng-bind="item.content"></span>
<!--注册删除事件-->
<span class="del" ng-click="deleteData(position)">删除</span>
<span class="detail">详情</span>
</li>
</ul>
- 灵活运用position，表示当前位置的下标值，从0开始。因为taskList属于数组，所以遍历的时候有position这个属性。
- 注意position（位置）要写在item（项目）的前面
- 删除方法的实现：拿到要删除的下标值，调用数组的splice（index,count）方法；参数一是要删除的位置，参数二是删除几个。
//实现删除操作,args是本条数据的位置
$scope.deleteData = function (args) {
//删除args这一项，并且删除1位即可
$scope.taskList.splice(args,1);
}
- 7.已完成事项的模拟数据
先准备好模拟数据，再将其绑定在相应的位置
// 已完成事项模拟数据
$scope.finishTask = [
{content:'已完成1',checked:true},
{content:'已完成2',checked:true},
{content:'已完成3',checked:true}
];
- 8.待办事件的item的CheckBox被选中后，应该进入到已经完成任务集合中
- 事件的绑定
当触发点击事件的时候，绑定一个方法，方法中传的参数是当前点击的位置
<input type="checkbox" ng-checked = "item.checked" ng-click="checkTask(position)">
- 方法的实现
- 当点击到input时，先获取到被选中的item，数组的splice方法返回的是被删除的iten
- 返回的是一个数组，应先获得其第一个对象。
- 先改变该对象的checked的状态
- 再将其添加到已完成事项的集合中
// 选中后从待办事件变成已完成事件
$scope.checkTask = function (args) {
//从未完成的集合中出来(获取被选中的item)
var deleteTask = $scope.taskList.splice(args,1);
//改变checked的状态
deleteTask[0].checked = true;
//添加到已完成的集合中(取得数组中的第一个)
$scope.finishTask.push(deleteTask[0]);
}
<form action="#" ng-submit="add($event)">
$scope.add = function (e) {
//阻值事件的默认行为
e.preventDefault();
……
