Riaxe Systems | Blog

June

10th

ng-option directive in AngularJS

Author : Alex Parker Date : June 10, 2017
No Comments

ng-option directive in AngularJS

ng-option is an AngularJS built in directive which is used to populate drop-down list. It uses array for listing. In many cases, it would be easier to use ng-repeat directive, but you have more flexibility when using ng-option directive. In case of ng-option, index can be object whereas in ng-repeat index of drop down list can only be string.

The following example explains ng-option briefly

Here, data is the object array where options are individual objects and option.id are key values which are assigned to selectedValue.

option.html
ng-option-deirective

Here, data is the object array where options are individual objects and option.id are key values which are assigned to selectedValue.

Note : ng-init initializes the default value of drop-down list. Without ng-init, output will be like this

selected-value

And if you are using ng-init, output will look like this

selected-value1

option.js
data-displayed-angular

Group of data can be displayed in drop down list using group by and ng-option.
Suppose a team is having 10 employees. I have to group them based on salary and populate in drop down list. Here is how we proceed

ng-option-angular

scope-data-angular

The generated HTML will be like this

angular-generated

ng-option is a powerful directive of AngularJS. It provides faster way to bind and populate data in dropdown list on HTML page.

Article by : Karma Kumar Rout
Sr. AngularJS Developer
Linkedin | Stackoverflow

 

Share

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>