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.
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.