Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at Scotch On The Rock (SOTR) 2010 (London) with:

Mixing Static And Dynamic Data In An AngularJS Select Menu

By Ben Nadel on

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




Reader Comments

please, provide your example in JSFiddle.
JSFiddle 100x better than any video demo :)
btw, thanks for post.

Reply to this Comment

@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!!

Reply to this Comment

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.

Reply to this Comment

Post A Comment

?
You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.