Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Last Updated: Mar 27, 2024
Medium

AngularJS Select Boxes

gp-icon
Basics of javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

Introduction

Drop-down menus are present on websites all over. They are used to pull all the pages in a particular category together in one organized element. AngularJS select boxes to let us create drop-down lists based on the items in an array or an object. 

Introduction

To create drop-down lists, both the ng-repeat and ng-options can be used. In this blog, we will discuss the AngularJS select boxes.   

AngularJS Select Boxes Using Ng Options

The ng-options directive creates drop-down lists based on objects or an array in AngularJS. 

Syntax

The syntax for ng-options is given below.

<select ng-options="array expression"></select>

Parameter values

Value Description
array expression

An expression to select the specified parts of an array to fill the select element.

 

Legal expressions:

  • label for value in an array.
  • select as a label for value in an array.
  • label group by group for value in an array.
  • label disable when disabled for value in an array.
  • label the group by group for value in array track by expression.
  • label disable when disabled for value in array track by expression.
  • label for value in array | orderBy expression track by expression.

Let us see a code example for the ng-options directive.

Code

<!DOCTYPE html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <body>
        <div ng-app="dropDown" ng-controller="control">
            <select>
            <!-- In this code, we have used the ng-repeat directive. The ng-repeat directive repeats a set of HTML a given number of times.-->
            <option ng-repeat="x in fruits">{{x}}</option>
            </select>
        </div>

        <script>
            var app = angular.module('dropDown', []);
            app.controller('control', function($scope) {
                $scope.fruits = ["Apple", "Oranges", "Banana"];
            });
        </script>
    </body>
</html>

Output

output

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

AngularJS Select Boxes Using Ng-Repeat

The ng-repeat directive repeats a set of HTML a given number of times. The set of HTML will be repeated once per item in a collection.

Syntax

The syntax for ng-repeat is given below.

<element ng-repeat="expression"> </element>

Parameter values

Value Description
Expression

An expression that specifies how to loop the collection.

Legal Expression examples:

  • abc in records
  • (key, value) in myObj
  • abc in records track by $id(x)

Let us see a code example for the ng-repeat directive.

Code

<!DOCTYPE html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <body>
        <div ng-app="dropDown" ng-controller="control">
            <select>
            <!-- In this code, we have used the ng-repeat directive. The ng-repeat directive repeats a set of HTML a given number of times.-->
            <option ng-repeat="x in fruits">{{x}}</option>
            </select>
        </div>

        <script>
            var app = angular.module('dropDown', []);
            app.controller('control', function($scope) {
                $scope.fruits = ["Apple", "Oranges", "Banana"];
            });
        </script>
    </body>
</html>

Output

OUTPUT

Limitation of Ng-Repeat

The ng-repeat directive's limitation is that the selected value must be a string. Let's see a code example for this.

Code

<!DOCTYPE html>  
<html>  
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
    <body>  
        <div ng-app="myApp" ng-controller="Cntrl">  
            <p>Select a fruit:</p>  
            <select ng-model="selectedFruit">  
            <option ng-repeat="x in fruits" value="{{x.fruit}}">{{x.fruit}}</option>  
            </select>  
            <h1>Choice: {{selectedFruit}}</h1>  
        </div>  
        
        <script>  
            var app = angular.module('myApp', []);  
            app.controller('Cntrl', function($scope) {  
                $scope.fruits = [  
                    {fruit : "Apple", color : "green"},  
                    {fruit : "Banana", color : "yellow"},  
                    {fruit : "Orange", color : "orange"},  
                    {fruit : "Strawberry", color : "red"}  
                ];  
            });  
        </script>  
    </body>  
</html>

Output

output

Now let's see an example using the ng-options directive. We can observe that we can select an object value using ng-options. Let's see the code for this.
Code

<!DOCTYPE html>  
<html>  
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
    <body>  
        <div ng-app="myApp" ng-controller="cntrl">    
            <select ng-model="selectedFruit" ng-options="x.name for x in fruits">  
            </select>  
            <h1>Choice: {{selectedFruit.name}}</h1>  
            <p>Fruit color: {{selectedFruit.color}}</p>  
        </div>  
        <script>  
            var app = angular.module('myApp', []);  
            app.controller('cntrl', function($scope) {  
                $scope.fruits =[  
                    {fruit : "Apple", color : "Green"},  
                    {fruit : "Grape", color : "Violet"},  
                    {fruit : "Strawberry", color : "Red"},  
                    {fruit : "Orange", color : "Orange"}  
                ];
  
            });  
        </script>  
    </body>  
</html>

Output

output

AngularJS Select Box with Default Value

There will be instances where we want to display a value from the drop-down list as a default. Let us see how we can do this through a code example.

Code

<!DOCTYPE html>
<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    </head>
    <body  ng-app="default" ng-controller="selectbox">
        <div>
            <select name="users" ng-model="userSelect">
                <option value="">--Select Fruit--</option>
                <option ng-repeat="option in arrlist" value="{{option.fruitID}}">{{option.name}}</option>
            </select>
        </div>
        <script>
            var app = angular.module('default', []);
            app.controller('selectbox', function ($scope) {
            $scope.arrlist = [{
                "fruitID": 1,
                "name": "Apple"
            }, 
            {
                "fruitID": 2,
                "name": "Banana"
            }, 
            {
                "fruitID": 3,
                "name": "Orange"
            }];
            
           // With the following code, we have specified the default value in the drop-down. 
            $scope.userSelect = "2";
            });
        </script>

    </body>
</html>

Output

output

Difference Between Default, Ng-Repeat, and Ng-Option

Default - The select option in AngularJS is a form control option. It is mainly used for selecting a particular value from the given set of options. The default option always displays one selected item on the header. 
 

Ng-Repeat - The ng-repeat directive causes a set of HTML to be repeated a specified number of times. The HTML will be repeated once for each collection item. 

The ng-repeat directive is ideal for creating an HTML table with one table row for each object and one table data for each object property if you have a collection of items.
 

Ng-Options - This directive gives more flexibility then ng-repeat directive. It is used for creating a list of options. The ng-option directive fills the dropdown select boxes list using arrays.  

Frequently asked questions

What is AngularJS?

Angular is an open-source web framework based on Javascript. It is mainly used for developing single-page applications. 

What is AngularJS select box?

AngularJS select boxes to let us create drop-down lists based on the items present in an array or an object. 

What are the directive to create select boxes?

In AngularJS, select boxes can be created using either ng-repeat or ng-option.  

Where can we use AngularJS select boxes?

AngularJS select boxes are used to create a drop-down selection of options. It is helpful when making an application or asking questions with a range of values.

How is ng-repeat unique compared to ng-options?

The ng-repeat directive instantiates a set of HTML code for each item in an array. The ng-options directive was especially used for filling a drop-down list with options.

Conclusion

In this blog, we have talked about the AngularJS Select Boxes. We have seen how AngularJS select boxes create drop-down lists based on the items present in an array or an object. 

Excited to learn more about Angular. Here are a few related articles you can refer to:

Please refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. Also, enroll in our courses and refer to the mock test and problems available. Have a look at the interview experiences and interview bundle for placement preparations.

Previous article
AngularJS Tables
Next article
AngularJS and SQL
Guided path
Free
gridgp-icon
Basics of javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass