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

Adding Dynamic Options for Multiple Selects Inside ng-repeat Directive

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

Introduction

Google developed AngularJS in 2010. Later, it was completely rewritten in 2016, and Javascript was dropped from its name, and it became Angular from AngularJS. It is a full-featured JavaScript framework for creating dynamic, single-page web applications. 

INTRODUCTION

This blog will see how to add dynamic options for multiple selects in the ng-repeat directive. Let's get started.

What are Dynamic Options

As the name suggests, dynamic options give you options dynamically according to the choice made. For example, if there are three items - Purse, Lipsticks, and Nailpaint. There are different color options for all three items. Dynamic options show only those colors which are available for the selected item. The working of this example is shown below in the implementation section.  

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

Ng-Repeat Directive

The ng-repeat directive is used when we want to show the set of values defined in the controller repeatedly. This directive also helps in displaying a list of values. The HTML code in which the ng-repeat directive is used will be repeated once for each item. This will help show options available for each item in the collection. These collections of items must be an object or an array. 

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

Limitations of Ng-Repeat

The ng-repeat directive's limitations are:

  • The selected value must be a string.
  • The collection of items must be an object or an array. 

Syntax

All the elements of HTML support the ng-repeat directive. But it is important to use proper syntax. So, let us see the syntax followed.

<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 now see how we can dynamically add an array of objects with multiple selects with the use of the ng-repeat directive in AngularJS. But before that, let us see the approach we will be using. 

Approach

The idea is to use ng-repeat that loops through that array of objects. Let's say we name this array as "ninjas". Each select menu in the DOM(Document Object Model) is modeled after its corresponding array indexes. The second select menu, for example, would be modeled after the second object in the “ninjas” array object. To achieve this we need to add an empty object to the “ninjas” array to add new select menus to the DOM; the ng-repeat directive will take care of the rest. Let’s understand multiple selects in ng-react with an example.

Example

Here, we will see an example of adding multiple selections and will display the data that is selected.

Code

<!DOCTYPE html>
<html ng-app="codingNinjas">

<!-- HTML head starts-->

<head>
	<meta charset="utf-8" />
	<!-- Add styling to button -->
	<style>
		th,
		td {
			width: 100px;
			margin: 20px;
			padding: 0 20px 0 20px;
		}

		select {
			width: 100%;
		}

		button {
			background-color: white;
			border-radius: 0;
		}

		body {
			font-family: "Sans-Serif";
		}
	</style>


	<script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"
		data-semver="1.5.11">
		</script>


	<!-- Creating dynamic options -->
	<script>
		var app = angular.module('codingNinjas', []);
		app.controller('MainCtrl', function ($scope) {
			$scope.ninjas = [{}];

			// Adding items
			$scope.items = ['Purse', 'Lipstick', 'Nailpaint'];

			// Adding color options 
			$scope.color = {
				Purse: ['Olive', 'Red', 'Peach'],
				Lipstick: ['Brown', 'Purple', 'Pink'],
				Nailpaint: ['Black', 'Grey', 'Green'],
			}

			$scope.addRow = function () {
				$scope.ninjas.push({});
			}

			$scope.getItems = function (items) {
				return $scope.color[items];
			}
		});
	</script>
</head>
<!-- HTML body starts-->

<body ng-controller="MainCtrl">
	<center>
		<h1>
			Coding Ninjas
		</h1>

		<h3>
			Add Dynamic Options for Multiple Selects inside ng-repeat Directive
		</h3>

		<!-- Create table for items and color options -->
		<div>
			<table>
				<tr>
					<th>Item</th>
					<th>Color</th>
					<th>Add</th>
				</tr>

				<tr ng-repeat="model in ninjas">

					<!-- Item option column -->
					<td>
						<select ng-options="items as items for items in items" ng-model="model.items"
							ng-change='getItems(model.items)'>
						</select>
					</td>

					<!-- Color option column -->
					<td>
						<select ng-options="color as color for color in getItems(model.items)" ng-model="model.color">
						</select>
					</td>

					<!-- Add button column -->
					<td>
						<button class="button" ng-click="addRow()">Add New Item</button>
					</td>
				</tr>
			</table>
		</div>

		<!-- Display selected items -->
		<h3>
			Items Selected :
		</h3>

		<p ng-repeat="model in ninjas">
			{{model.items}} - {{model.color}}
		</p>
	</center>

</body>

</html>

Output

Output

Here, you can see that we added multiple options under the categories ‘Item’ and ‘Color’. After selection, the webpage will look like this:

output

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 data ng-repeat?

The data-ng-repeat directive allows validators that don't understand Angular to validate the HTML. 

What is the difference between ng-repeat and Ng-for?

For each element of the collection, ng-repeat generates an inherited child scope, while *ng-for creates a local variable in that block.  

What is the ng-controller in Angular?

In AngularJS, the ng-controller directive is used to add a controller to the application. It can also be used to add methods, functions, and variables called to perform a particular action when an event occurs, such as a click.

Where can we use AngularJS select?

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

Conclusion

This article taught us how to add Dynamic Options for Multiple Selects inside ng-repeat Directive. We started with an introduction to dynamic options and ng-repeat directive. And also discussed an example for better understanding. 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
How to directly update a field by using ng-click in AngularJs?
Next article
How to detect when an @Input() value changes in Angular
Guided path
Free
gridgp-icon
Basics of javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass