12 Deleting Notes

Deleting Notes

It would be nice if we could delete notes, so let's implement that.

Let's add a little trash can icon next to the "Update Note" button to delete it.

app/notes/notes.html

<a>
  <i class="fa fa-trash-o"></i>
</a>

LAB:

• Wire up the <a> tag to something in the controller.
• Extra credit: Make something that actually deletes a note.
  • Hint: The API uses the DELETE method to the url: nevernoteBasePath + 'notes/' + note.id
  • Hint2: Add the api key to the URL, like $http.get().
• Bonus: Use both the controller and the NotesBackend module.

SOLUTION:

app/notes/notes.html

<a ng-click="deleteNote()">
  <i class="fa fa-trash-o"></i>
</a>

app/notes/notes.js

  // in NotesBackend
  this.deleteNote = function(note, callback) {
    var self = this;
    $http.delete(nevernoteBasePath + 'notes/' + note.id + '?api_key=' + apiKey)
    .success(function(newNoteData){
      self.fetchNotes(callback);
    });
  };
  // in NotesController
  $scope.deleteNote = function() {
    NotesBackend.deleteNote($scope.note, self.refreshNotes);
  };

Note that when we delete the currently-loaded note, it disappears from the sidebar, but it is still in the form. Hey, that sounds familiar...

  $scope.deleteNote = function() {
    NotesBackend.deleteNote($scope.note, self.refreshNotes);
    this.clearNote();
  };

That's all working nicely, but the trash can link appears even when there isn't an existing note loades. How can we show it only when an existing note is loaded?

LAB:

• Show or hide the trash can based on whether a saved note is loaded into the form.
• HINT: Look at the sidebar HTML.

SOLUTION:

    <a ng-click="deleteNote()" ng-show="note.id">
      <i class="fa fa-trash-o"></i>
    </a>

Commit!

Next: Rich Text Editing