AngularJS: Exploring ng-options, ng-model, and the ngStorage module

For this post, I created an example app that I am calling “Notes Vault.”  My primary goal was to check out ngStorage but in doing so I also explored ng-options and ng-model.  Let us take a look at the end result.

[iframe src=”http://embed.plnkr.co/no13hi/preview” width=”100%” height=”380″]

As you can see, the user interface is fairly straight-forward.  There is a drop-down list that features previously saved notes.  When you select one, it populates the title box and the content box.  The user has options to delete the currently selected note, clone the note, or create a new, blank note.  For your convenience, it also pre-populates with two notes, when you first visit the site.

The first thing we will check out is the ngStorage module.  I have looked at localStorage in JavaScript before but this module promised an easier way to do the job.

Above is how I instantiated the module and set the default value of $storage.notes.  Now that the value is defaulted, you need to populate the drop-down box.

AngularJS offers an interesting way of populating a drop-down box with options.  You can use ng-options to specify an array of options and ng-model to specify what variable the selected item is available as.

So, how am I powering those three buttons?  I could not find an Angular way of doing it, so I am going old school one the problem.

Have any questions, comments, etc?  Feel free to leave a comment below.

Plunker

jsFiddle

1 thought on “AngularJS: Exploring ng-options, ng-model, and the ngStorage module

Leave a Reply

Your email address will not be published.