12. 小草莓备忘录

• 1. 导入需要的文件（注意导入的顺序）
• 2. 绑定title，验证关联是否成功
• 3. 将所要展示的数据，在模型中先模拟出来

//         代办事项模拟数据
    $scope.taskList = [
        {content:'小草莓1',checked:false},
        {content:'小草莓2',checked:false},
        {content:'小草莓3',checked:false}
    ];

• 4. 通过 ng-repeat将模拟的数据展现出来

 <!--展示模型数据-->
            <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>

• 5. 点击添加按钮添加数据,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 = "";

• 6. 删除事件处理，找到删除的按钮，注册事件（点击事件）

      <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]);
    }

• 9. 默认行为的处理，通过事件对象默认行为
  • 通过传递事件对象处理默认行为

 <form action="#" ng-submit="add($event)">

• 阻值事件的默认行为

 $scope.add = function (e) {
        //阻值事件的默认行为
        e.preventDefault();
……