The Super Simple Version
Starting with a basic array of ints and an integer variable (app and controller setup too)
var myApp = angular.module('myApp', []);
myApp.controller('myAppCtrl', function($scope) {
$scope.SimpleData =[1,2,3,4];
$scope.SimpleSelectedData = 3;
}
<select ng-model="SimpleSelectedData" >
<option ng-repeat="item in SimpleData" ng-selected="{{item==SimpleSelectedData}}" value="{{item}}">{{item}}</option>
</select>
var myApp = angular.module('myApp', []);
myApp.controller('myAppCtrl', function($scope) {
$scope.SimpleData =[1,2,3,4];
$scope.SimpleSelectedData = 3;
}
<select ng-model="SimpleSelectedData" >
<option ng-repeat="item in SimpleData" ng-selected="{{item==SimpleSelectedData}}" value="{{item}}">{{item}}</option>
</select>
Notice that the select is bound to the $scope.SimpleSelectedData using ng-model=”SimpleSelectedData” and option contains the ng-repeat which is bound to the array in $scope.SimpleData. The selected item is set by using ng-selected in the option and is compared to what is found in $scope.SimpleSelectedData. Last, the value and display of the option are set to the value of each item being iterated through during ng-repeat. This method works nicely for data that are native types like int or string but shouldn’t be used if you are using objects.
The ng-option Version
A few things to remember at this point that are important:
ng-options can be set up as a string with all the information needed to create your select items. example (“item as item.somevalue for item.somevalue in mycollection track by item.somevalue”).
ng-model compares by reference, not value. So if you have an object to be used as ng-model and it does not point to an element in the collection being used for the options you will want to use track by to specify the property name to use for the default value comparison.
var myApp = angular.module('myApp', []);
myApp.controller('myAppCtrl', function($scope) {
$scope.StateList = [
{
"Id": 1,
"Code": "AL",
"Name": "Alabama"
},
{
"Id": 2,
"Code": "AK",
"Name": "Alaska"
},
{
"Id": 3,
"Code": "AZ",
"Name": "Arizona"
},
{
"Id": 4,
"Code": "AR",
"Name": "Arkansas"
}]
$scope.Address = {
"Address1": "123 Maple" ,
"City": "Tempe",
"State": "AZ",
"ZipCode": 89234,
"Country": US
}
<select ng-model="Address.State"
ng-options="state as (state.Code) for state in StateList track by state.Code">
</select>
var myApp = angular.module('myApp', []);
myApp.controller('myAppCtrl', function($scope) {
$scope.StateList = [
{
"Id": 1,
"Code": "AL",
"Name": "Alabama"
},
{
"Id": 2,
"Code": "AK",
"Name": "Alaska"
},
{
"Id": 3,
"Code": "AZ",
"Name": "Arizona"
},
{
"Id": 4,
"Code": "AR",
"Name": "Arkansas"
}]
$scope.Address = {
"Address1": "123 Maple" ,
"City": "Tempe",
"State": "AZ",
"ZipCode": 89234,
"Country": US
}
<select ng-model="Address.State"
ng-options="state as (state.Code) for state in StateList track by state.Code">
</select>
A few things to notice are that the element state can be displayed in the “as” part of this statement. The code property of the state object is what is being displayed in the select list. In the next example I will show how to use a filter for this display field.
Using a Filter for your Options
Using a filter on your collection is a powerful way to format, select a subset of data and add other logic that gets you the data you want in your select control. Here is a simple example of using a filter to reformat the display label on the select. All the code from above still applies but I will be adding a filter and changing the select’s ng-options statement.
myApp.filter('stateName', function() {
return function(itm) {
return [itm.Name , itm.Code, itm.Id].join(" ,");
};
//html for the select
myApp.filter('stateName', function() {
return function(itm) {
return [itm.Name , itm.Code, itm.Id].join(" ,");
};
//html for the select
So you will notice that the as statement is followed by the state object and a pipe and the name of the filter. The filter then returns a string from the itm object passed in to be used to display the values you need in the select.
On select event
It is very hand to have an event function for when something is selected so you can’t take action based on this event. So no example would be complete without how to hook this up.
//inside the controller declare a function to be called when the select event is called
$scope.OnSelectEvent = function(itm){
//do some stuff now that the selection event has been fired
}
//small change to the html to add the ng-onchange
<select ng-model="Address.State" ng-change="update()"
ng-options="state.Code as (state|stateName) for state in StateList">
</select>
//inside the controller declare a function to be called when the select event is called
$scope.OnSelectEvent = function(itm){
//do some stuff now that the selection event has been fired
}
//small change to the html to add the ng-onchange
<select ng-model="Address.State" ng-change="update()"
ng-options="state.Code as (state|stateName) for state in StateList">
</select>
