3.2.1 配置构建Angular应用——简单的笔记存储应用——编辑功能

　　本节我们会接着上节课的内容，继续来完成使用Angular来创建简单的笔记存储应用，上一节课，我们完成了笔记的展示功能，本节课，我们来完成编辑功能。

　　编辑主要是两个功能：编辑现有的笔记以及创建新笔记。首先我们需要让应用第一次启动或用户点击"添加"按钮时创建一个新笔记。

　　3.2.9 添加笔记功能

　　首先我们需要给表单添加一些模型，这样可以用表单来控制数据更新，同时，你还需要让编辑器右侧显示一个实时预览笔记效果的界面，因此需要添加一个Markdown指令，打开index.html文件，进行如下修改：

<div class="panel-heading">
    <!-- 把title模型关联到输入框 -->
    <h3 class="panel-title"><input type="text" class="form-control" ng-model="content.title" placeholder="New Note" required /></h3>
</div>
<div class="panel-body">
    <div class="row">
        <div class="col-sm-6">
             <h3>Editor</h3>
             <!-- 把content模型关联到文本输入框 -->
             <textarea class="form-control editor" rows="10" ng-model="content.content" placeholder="Note Content" required></textarea>
        </div>
        <div class="col-sm-6">
             <h3>Preview</h3>
             <!-- 使用markdown命令来预览内容 -->
             <div class="preview" markdown="{{content.content}}"></div>
        </div>
    </div>
</div>

　　这里使用ngModel来把模型的值关联到输入框和文本框上，用户做任何改动都会立刻反应到content模型。修改完成后，刷新页面，在编辑面板输入内容，在预览面板即可看见。下面我们来实现点击"添加"按钮，创建新笔记的功能。要实现这个功能，我们需要给"添加"按钮绑上一个click事件，进入index.html文件：

<div class="panel-heading">
    //给"添加"按钮添加click事件
    <h3 class="panel-title"><button class="btn btn-primary btn-xs pull-right" ng-click="create()">添加</button>我的笔记</h3>
</div>

　　然后更新"编辑"按钮，也是进入index.html文件：

<h3 class="panel-title">{{content.title}} <button class="btn btn-primary btn-xs pull-right" ng-click="editing=true">编辑</button></h3>

　　"添加"按钮会调用控制器的create()方法（我们后面写），"编辑"按钮不会调用方法，但会改变编辑模式。

　　下面我们来定义create()方法，进入editor.js文件，编辑控制器：

$scope.create = function(){   //创建create方法并把它赋值给作用域，这样就可以在模版的ngClick中调用
    $scope.editing = true;    //确保editing状态为true
    $scope.content = {    //使用空值重置content模型
      title:'',
      content:''
    };
};

　　此时，我们单击"添加"按钮，会触发create()方法，它会把editing模型改为true，并把content模型重置为一个空笔记。

　　3.2.10 保存笔记的功能

　　下面我们给"保存"按钮添加一个save()方法，来保存笔记。保存笔记需要使用$http服务来把笔记发送到服务。这个服务会使用POST方法来创建一个新笔记病用PUT方法来更新笔记。$http.post()和$http.put()都可以接受第二个参数，它是发送到服务的数据。除此之外使用方法和$http.get()一样。

　　保存笔记前，先要确定笔记是否有存在，就需要判断内容是否有id，新笔记在保存之前是没有id的，如果id存在，就更新笔记，如果不存在，就创建新笔记。进入editor.js文件，创建save控制器方法：

  $scope.save = function(){   //把save()方法赋值给作用域
    $scope.content.date = new Date();   //把日期设置成这个笔记最后一次被编辑的日期
    if($scope.content.id){    //检查这个笔记是否有ID，从而判断是该更新已有笔记还是创建新笔记
      $http.put('/notes/' + $scope.content.id, $scope.content).success(function(data){    //向笔记API发送PUT请求来更新笔记并在完成之后关闭编辑模式
        $scope.editing = false;
      });
    }else{
      $scope.content.id = Date.now();   //因为这是一个新笔记，基于当前时间给它一个独一无二的ID
      $http.post('/notes', $scope.content).success(function (data) {    //向笔记API发送POST请求来创建一个新笔记，然后把新笔记加入笔记列表，最后关闭编辑模式
        $scope.notes.push($scope.content);
        $scope.editing = false;
      })
    }
  };

　　save()方法首先用当前的时间戳更新日期，以保存最后一次保存的时间。然后检查ID是否存在，并据此来决定发送post或者put请求。这两个请求都会关闭编辑模式，进入笔记展示模式。

　　在保存笔记之前，我们可以使用Angular内置的表单特性来验证内容并在验证失败时禁用"保存"按钮。你需要在表单有效的时候显示"保存"按钮并给它添加click事件。进入index.html文件，对"保存"按钮做如下修改：

<button class="btn btn-primary" ng-click="save()" ng-disabled="editor.$invalid">保存</button>

　　ngClick会调用save()方法并保存笔记，但如果editor.$invalid为true，那ngClick将不会被触发。

　　3.2.11 删除笔记的功能

　　删除笔记首先我们要给"删除"按钮添加一个remove()方法，它会调用服务器来删除笔记并把它从应用中删除。进入editor.js文件，添加remove()方法到控制器中：

  $scope.remove = function(){   //声明remove()方法
    $http.delete('/notes/' + $scope.content.id).success(function(data){    //向笔记API发送删除请求
      var found = -1;
      angular.forEach($scope.notes, function(note,index){   //遍历笔记数组找到要删除的笔记下标
        if(note.id === $scope.content.id){
          found = index;
        }
      });
      if(found>=0){   //如果找到笔记，从angular应用的笔记列表中删除
        $scope.notes.splice(found,1);
      }
      $scope.content = {    //重置content模型，为下一个新笔记做准备
        title:'',
        content:''
      };
    });
  };

　　remove()方法基于笔记的ID给笔记服务发送http delete请求，然后在收到http响应时从控制器的notes数组删除笔记。为了从notes模型删除笔记，我们需要编辑所有的笔记，判断ID是否与被删除的笔记ID一样，如果一样，删除笔记，同时重置content模型，为下一条笔记做准备。

　　最后我们来给"删除"按钮添加ngClick事件，来调用remove()方法。此时需要用ngIf来有条件的现实"删除"按钮，只在编辑现有笔记的时候才显示，因为不能删除一个还没有保存的笔记。进入index.html文件，做如下修改：

<button class="btn btn-danger pull-right" ng-click="remove()" ng-if="content.id">删除</button>

　　现在编辑现有笔记的时候，就可以调用remove()方法来删除笔记了。