Due to the data-driven, two-way binding nature of AngularJS input elements, mixing static and dynamic data in a single Select menu can be challenging. If your data it completely dynamic, it's a total breeze. But, the moment you want to add a static option, suddenly you have an asymmetric list of references that need to be mapped on to your View Model (ie. $scope). But, after a good deal of tinkering, I think I found a fairly straightforward way of doing this.
Since your mixed-list of Select Options contains references to different types of data, you can no longer have a simple ngModel value that binds to a $scope reference. Instead, you have to maintain a "selection" model that is dedicated to the Select menu; then, you have to watch for changes in that selection value to see if other $scope changes need to be precipitated.
To demonstrate this approach, I have created a Select menu that contains a "dynamic" list of friends and a static list of pseudo-options. If a pseudo-option is selected, it may change the currently-selected friend.
In order to build the Select menu, I have created a composite collection of options that composes both the static values and the dynamic values. In order to make selection easy, I have architected the ngOptions directive to use a property of the options list as the selection target:
ng-options="option.value as option.text for option in options"
This directive configuration means that when an option is selected, use [option.value] as the reference to store in the ngModel expression. In using this approach, I can create a composite options list in which each option can have a completely decoupled value target.
In the following code, notice that I am mapping my "friends" collection onto an option collection in which the "value" of the option points back to the friend instance.
Since our options list contains mixed value reference, we have to explicitly react to changes in the select menu model. In my $watch() handler, I inspect the newly selected value to see if it needs to be copied into the selectedFriend model.
This approach is a bit tedious; but again, this only needs to be done when the Select menu is driven by a combination of both static and dynamic data. Notice, however, that since we are using an object property to define our Select value, we can easily change the selection by pointing it a given friend reference (as within the selectJoanna() method).
Want to use code from this post? Check out the license.
It's funny you mention that - I was just recently trying to think of better ways to package this stuff. I was wondering if I could somehow get a GitHub repo for all my blog examples; then, post them to "github pages". My issue with JSFiddle is that I'm not too familiar with it - but I do like how it lays stuff out and allows you to see code AND see output at the same time.
I'll see if I can get something a little more "interactive" working in the future. Most of the time, the issue is that there are simply not enough hours in the day!!
Here ( http://plnkr.co/edit/pJVadsbR7StokomqAiOC?p=preview ) is a plunker page with this code. The actual angular pieces have been separated out into app.js.
I have 2 <div> tag one left & another is right ,
left div tag have 10 list tags of anchor tags & right div has ng-view reffering to a template ,
i want to display a some.json data in ng-view on one of the list anchor tag clicking but with some condition,
some.json contains array of data for 10 members with id,name,img,data.
when i click 1st <li><a></a></li> it should display only data with id=1,
if we click on 3rd <li><a></a></li> it should display data from json file with id=3.
i hope u understood my problem ,please help me by sending code to my mail id
thank u in advance
This post has given me the best procedure that I have found so far related to how I can add a couple static elements to the beginning of my select options list. However, I have an issue with my dynamic data. At the point the ng-options is called, the results of the restful dynamic data has not yet been returned.
Can you give me a push in the right direction or a solution to update the options list after the dynamic data has returned from the server.
Thanks for your post and time.
I think I figured it out. I just added a function to the promise on the returned $resource. When the promise was fulfilled, my function was called which populated my option list properly.
If there is a better solution to this, please fill me in.
How to retain the selected value of a dropdown(along with other dropdown values) after the page is refreshed in angularjs? here the data is dynamic
Do you know of any way to implement this with a datalist with options instead of a select?