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()方法来删除笔记了。
文章来源: www.cnblogs.com，作者：姜腾腾，版权归原作者所有，如需转载，请联系作者。
原文链接：www.cnblogs.com/jiangtengteng/p/6517075.html
- 点赞
- 收藏
- 关注作者
评论（0）