Select lists can be tricky in any language. Typically there is some data source providing a human-readable list of options, a machine-readable value (unique identifier), and a default, or pre selected item in the list.
Here is a quick example for dealing with how to set the default or pre selected item in a select list using AngularJS.
Given a data set of products and a selected product id:
var products = [
{
"id":1,
"name":"cat hammock",
},
{
"id":2,
"name":"space heater",
},
{
"id":3,
"name":"vanilla candle",
},
];
var selectedProductId = 2;
- We can set up the select list to either bind to a property of each product in the array (the property “id” in this situation).
<select ng-options="p1.id as p1.name for p1 in vm.products" ng-model="vm.selectedProductId"></select> - Or bind the selected item to the entire object itself.
select ng-options="p2 as p2.name for p2 in vm.products" ng-model="vm.selectedProduct"></select>
Option 1 is standard, as when the form is submitted, the product ID will be sent to the server for processing. With option 2, Angular creates identifiers on the fly for each option in the list, and you have less control over the data being submitted. However, when working with an entire selected object (rather than a single selected object property) it’s much easier to do more complex functionality like chaining select lists.
The Controller Code
Here we bind the list of objects and the selected product id to the view model. We then also pull out the entire selected object (selectedProduct) from the list using the javascript .filter function.
myApp.controller('SelectListCtrl', function() {
this.products = products; //all of the options
//select the default value different ways, first by ID
this.selectedProductId = selectedProductId;
//then the entire object out of the array of products
this.selectedProduct = this.products.filter(function(p){
return p.id == this.selectedProductId;
})[0];
});
To bring it all together, here is the working example, which can be downloaded here.
The Full Code
<!doctype html>
<html ng-app="SelectListExample">
<head>
<title>Angular Drop Down List Example</title>
<script src="angular.min.js"></script>
</head>
<body ng-controller="SelectListCtrl as vm">
<style>
div { margin-bottom: 15px; }
</style>
<script type="text/javascript">
var myApp = angular.module('SelectListExample', []);
myApp.controller('SelectListCtrl', function() {
this.products = products; //all of the options
//select the default value different ways, first by ID
this.selectedProductId = selectedProductId;
//then the entire object out of the array of products
this.selectedProduct = this.products.filter(function(p){
return p.id == this.selectedProductId;
})[0];
});
var products = [
{
"id":1,
"name":"cat hammock",
},
{
"id":2,
"name":"space heater",
},
{
"id":3,
"name":"vanilla candle",
},
];
var selectedProductId = 2;
</script>
<div>Default Value By Object Property</div>
<div>
<select ng-options="p1.id as p1.name for p1 in vm.products"
ng-model="vm.selectedProductId"></select>
</div>
<div>Default Value By Entire Object</div>
<div>
<select ng-options="p2 as p2.name for p2 in vm.products"
ng-model="vm.selectedProduct"></select>
</div>
</body>
</html>