AngularJS – Select

This is HTML select control manipulated by AngularJS. We know that <select> tag has syntax mentioned below:

<select>

<option value=”Value of Item”>Text of the Item</option>

</select>

We use two AngularJS directives ng-options and ng-repeat to manage <select> tag. Let’s understand it using few examples:

ng-options

This directive fills the options to select HTML control.

1

Output

2

ng-repeat

This directive repeats associated HTML element itself to the number of times record is present in data source.

3

Output

4

ng-options Vs ng-repeat

Because the ng-repeat directive repeats a block of HTML code for each item in an array, it can be used to create options in a dropdown list, but the ng-options directive was made especially for filling a dropdown list with options, and has at least one important advantage:

Dropdowns made with ng-options allows the selected value to be an object, while dropdowns made from ng-repeat has to be a string.

Be  Connected…

Satyendra Mishra

LinkedIn : https://www.linkedin.com/in/satyendram
Twitter : https://twitter.com/ersatyendram
FaceBook : http://fb.me/ersatyendram
C# Corner : http://www.c-sharpcorner.com/members/satyendra-mishra4

Advertisements

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