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.
Hello, I would like use your example, but also, with ngStorage, I would like the select option to stay on the last selected option if I reload the page, example, if I select two option in the dropdown and after reload the page, should appear the second option selected. Any help?
I ask this question here width a codepen: http://stackoverflow.com/questions/26055079/ngstorage-in-select-with-angularjs
Thanks!