Mixing Static And Dynamic Data In An AngularJS Select Menu
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.
<!doctype html>
<html ng-app="Demo" ng-controller="DemoController">
<head>
<meta charset="utf-8" />
<title>
Mixing Static And Dynamic Options In An AngularJS Select Menu
</title>
</head>
<body>
<h1>
Mixing Static And Dynamic Options In An AngularJS Select Menu
</h1>
<form>
<select
ng-model="selection"
ng-options="option.value as option.text for option in options">
<!-- You can have ONE default, null selection option. -->
<option value="">- - Make Selection - -</option>
</select>
<button type="button" ng-click="selectJoanna()">
Select Joanna
</button>
<button type="button" ng-click="selectNull()">
Select null
</button>
</form>
<p ng-show="selectedFriend">
{{ selectedFriend.id }} - {{ selectedFriend.name }}
</p>
<!-- Load jQuery and AngularJS from the CDN. -->
<script
type="text/javascript"
src="//code.jquery.com/jquery-1.9.1.min.js">
</script>
<script
type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js">
</script>
<!-- Load the app module and its classes. -->
<script type="text/javascript">
// Define our AngularJS application module.
var demo = angular.module( "Demo", [] );
// -------------------------------------------------- //
// -------------------------------------------------- //
// I am the main controller for the application.
demo.controller(
"DemoController",
function( $scope ) {
// -- Define Scope Methods. ----------------- //
// I explicitly select Joanna just to demonstrate how
// the two-way data binding will behave. Once we
// select Joanna explicitly, the ngModel will reflect
// that change in the Select menu.
$scope.selectJoanna = function() {
$scope.selection = $scope.friends[ 1 ];
};
// One more demo to show how selection will be
// reflected in two-way data binding.
$scope.selectNull = function() {
$scope.selection = null;
};
// -- Define Scope Variables. --------------- //
// I am the "dynamic" data portion of the select menu.
// Dynamic in the sense that it may have come from a
// data source and we don't know who big the list is.
$scope.friends = [
{
id: 1,
name: "Tricia"
},
{
id: 2,
name: "Joanna"
},
{
id: 3,
name: "Sarah"
}
];
// I am the "static" data portion of the select menu.
// This will be hard-coded in our Controller and used
// to facilitate selection.
$scope.staticOptions = [
{
value: "random",
text: "Random Friend"
},
{
value: "hrule",
text: "- - -"
}
];
// When it comes to populating the Select options,
// we can't simply feed in the collection of friends
// because, well, that's not what that list is. Sure,
// it *contains* friends; but, it's NOT a list of
// friends. As such, we need to create a separate list
// of options that houses BOTH our dynamic data and
// our static data.
//
// As we do this, we want to map Friend collection
// onto a collection that mimics the Value/Text
// structure of our other options. This will make
// rendering the list easier.
$scope.options = $scope.staticOptions.concat(
$.map(
$scope.friends,
function( friend ) {
// NOTE: "Value" here will reference our
// friend object, which will be mirrored
// in the selection variable.
return({
value: friend,
text: friend.name
});
}
)
);
// Since the select list is NOT just a list of
// friends, we have to differentiate between our
// list of friends and our selection.
$scope.selection = null;
$scope.selectedFriend = null;
// -- Define Scope Events. ------------------ //
// As the select menu changes, it will change our
// selection. When that happens, we have to map that
// change onto our Friends collection.
$scope.$watch(
"selection",
function( value ) {
// No "valid" value was selected.
if ( value === "hrule" ) {
// Reset the selection
$scope.selection = null;
// A random friend was selected.
} else if ( value === "random" ) {
var index = Math.floor( Math.random() * 3 );
$scope.selection = $scope.friends[ index ];
// NULL or an actual friend was selected.
// In either case, we can use the selection
// value as our selected friend.
} else {
$scope.selectedFriend = $scope.selection;
}
}
);
}
);
</script>
</body>
</html>
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.
Reader Comments
@Paul,
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.
gghvgvbhjbfcf
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
Ben,
I'm new to both Angular.js and JavaScript in general and have a huge project with a tight deadline that I'm working on. So I'm looking for hints and direction on many parts of my project.
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.
Darrell
Ben,
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.
Thanks
Darrell
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?