Tag Archives: initialize

Display a Server-Supplied Drop Down List Using AngularJS

These are my notes on displaying a list of server-supplied objects in a drop down list using AngularJS.

Background

I have a server that supplies lists of lookup objects that are used in an AngularJS-based single-page application (SPA). The SPA obtains a list through an API call to the server. The server returns an ordered list of JSON objects. Every object in every list includes a key value, a display value, and supplementary data. For the purposes of this article, only the key and display values are of any concern.

For example, the SPA needs a list of units of measure. The server supplies a list of objects along these lines. They key value is called code and the display value is called display:

[javascript light=”true”]
[
{
code: "L",
display: "L",
description: "litres"
},
{
code: "ML",
display: "mL",
description: "millilitres"
},
… etc …
]
[/javascript]

In the SPA code, each lookup table is wrapped in its own Angular service.

From List of Objects to Dropdown Using <select>

Angular can be told to create a dropdown list using an array of objects thus:

[html light=”true”]
<select ng-model="product.uom"
        ng-options="u.display for u in units" />
[/html]

Here ng-options tells Angular to build the dropdown list showing the display attribute of each object. Whenever the user chooses an item, the entire associated object is stored in $scope.product.uom (uom means units of measure). For my purposes this is very handy since I want access to the entire object.

Defaulting to a Value

This works beautifully until an edit page is shown. When displaying data from the server, the dropdown shows a blank selection even though $scope.product.uom contains an object with all the correct values!

The problem is that Angular matches based on object references, not object contents. This can be illustrated thus:

[javascript]
var a = {foo: "bar"};
var b = {foo: "bar"};
var c = a;
[/javascript]

Variables a and b contain two separate objects that by chance have attributes with the same values. Variables a and c contain the same object pointer.

In the example above, Angular will recognize the value in $scope.product.uom only if it points to an object in the master list $scope.units. The fact that the server-supplied object has identical attributes is irrelevant — Angular only cares whether the object pointers are identical.

[Edit]

There are a couple of ways around this. If there is a unique key on the object, one can use the AngularJS track by clause to tell AngularJS to compare the keys. Continuing the above examples, each object has a code attribute that has a unique string which JavaScript can compare.

[html light=”true”]
<select ng-model="product.uom"
ng-options="u.display for u in units track by u.code" />
[/html]

[Original Article]

Otherwise,  when an object is loaded from the server for editing, the lookup values are replaced with pointers to the corresponding objects in the dropdown list. An unsophisticated but functional bit of code to perform this substitution might be:

[javascript]
// Wrapper function to retrieve a product
// from the server, keyed on productId.
apiProduct.lookup(productId, function(product) {
$scope.product = product;

// Replace the server-supplied lookup value
// with the matching value
// in the $scope.units array.
$scope.product.uom = lookup_by_code(product.uom.code, $scope.units);
});

function lookup_by_code(code, data) {
for(var i=0; i
if(data[i].code == code)
return data[i];

return null;
};
[/javascript]

Update

There is a JSFiddle that demonstrates the value/reference problem concisely.