Populating Dropdown in AngularJS using ng-repeat directive

Standard

Key things to remember when populating dropdown in AngularJs is:

1. Always initialize model value of select element in controller, otherwise empty option will be displayed once HTML is parsed.

2. They are couple of ways to populate data in select box, but if you are going for customization of by default value as ‘Select’ or ‘Choose Me’ etc, its better to use ng-repeat directive in options tag.

HTML Code:

<select id=”ddlFormType” name=”ddlFormType” style=”width: 250px;” data-ng-model=”ddlSample”
ng-disabled=”(reportType == ‘Test Report’)” ng-show=”(reportType == ‘Sample Report’)”>

<option value=”0″>[Select]</option>
<option data-ng-repeat=”item in sampleList” value=”{{item.Value}}”>{{item.Text}}</option>

</select>

 

AngularJS Code:

var sample = angular.module(‘sampleApp’, [‘ngRoute’]);

//Controller
sample.controller(‘sampleController’, function ($scope) {
$scope.ddlSample = “0”;
$scope.sampleList = [{ Text: ‘Test1’, Value: ‘111’ }, {Text: ‘Test2’, Value: ‘222’}];
});

 

Advertisements

One thought on “Populating Dropdown in AngularJS using ng-repeat directive

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s