An Example of how to use Select Options in AngularJs

Offering users the option to select from a list of choices is fundamental to humans interfacing with computers. So this is not a new subject but if you are new to AngularJs, it may be something that you would like to explore a little. Sometimes when things are new we struggle and then once we learn how to use it we forget how much of a struggle it was to learn. This article is geared for those who are still very familiar with the struggle to wrap there heads around the “Angular” way of doing things. Starting with a simple select and then we will add more functionality as the example goes. So lets look at some code.

The Super Simple Version

Starting with a basic array of ints and an integer variable (app and controller setup too)

1 2 3 4 5 6 7 8 9 10 11 12

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:

1. 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”).
2. 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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

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.

1 2 3 4 5 6 7 8 9 10

//The filter   myApp.filter('stateName', function() {       return function(itm) {         return [itm.Name , itm.Code, itm.Id].join(" ,");   };   //html for the select       <select ng-model="Address.State"         ng-options="state.Code as (state|stateName) for state in StateList">       </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.

1 2 3 4 5 6 7 8 9 10 11

//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>

Plunker

I hope this example is helpful to someone and feel free to leave comments about error or corrections.