Adding Dynamic Options for Multiple Selects Inside ng-repeat Directive

GAZAL ARORA
Last Updated: May 13, 2022

Introduction

Google developed AngularJS in 2010. Later, it was completely re-written in 2016, and JS 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. Developers can use HTML as a template language and HTML syntax to define the application's components. In this blog we will see how to add dynamic options for multiple selects in the ng-repeat directive, lets get started.

ng-repeat directive

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. 

Syntax

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

All the HTML elements support it.

Don't worry; Coding Ninjas provides a whole course on Angular. It offers basic to Advance level understanding. Enroll today and build unique website designs.

TASK

Given an HTML document with an options element, the goal is to dynamically add an array of JavaScript objects with multiple selects using ng-repeat in AngularJS.


Alert Ninjas! The ongoing emergence of new technologies in web development keeps the interest in this subject high. But, before you start on the big tasks, we recommend that you understand the fundamentals. With our JavaScript Course, you may jumpstart your web development career by mastering JS principles. It's now the cheapest it's ever been!


APPROACH

The idea is to use ng-repeat that loops through an array. Let's call this array "models." Each select menu in the DOM is modeled after its corresponding index in the array. The second select menu, for example, would be modeled after the second object in the model's objects array. We only need to add an empty object to the model's 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 add multiple selects and will display the selected data.

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

<head>
<meta charset="utf-8" />
<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>

<script>
var app = angular.module('codingNinjas', []);

app.controller('MainCtrl', function($scope) {
$scope.models = [{}];
$scope.states = ['Haryana', 'Punjab', 'Bihar'];
$scope.cities = {
Haryana: ['Hisar', 'Gurugram', 'Sirsa'],
Punjab: ['Ropar', 'Barnala', 'Amritsar'],
Bihar: ['Patna', 'gaya', 'Darbhanga'],
}
$scope.addRow = function() {
$scope.models.push({});
}
$scope.getState = function(state) {
return $scope.cities[state];
}
});
</script>
</head>

<body ng-controller="MainCtrl">
<center>
<h1 style="color: red;">
Coding Ninjas
</h1>

        <h3>Let's add Dynamic Options for Multiple Selects inside ng-repeat Directive</h3>
        
        <div>
            
        <table>
<tr style="color:Blue">
<th>State</th>
<th>City</th>
<th>Action</th>
</tr>

<tr ng-repeat="model in models">
<td>
<select ng-options=
"state as state for state in states"
ng-model="model.states"
  ng-change='getState(model.states)'>
</select>
</td>
<td>
<select ng-options=
"city as city for city in getState(model.states)"
ng-model="model.cities">
</select>
</td>
<td>
<button ng-click="addRow()">AddRow</button>
</td>
</tr>
</table>
            
        </div>

<h3 style="color:Green;">Selections Made</h3>
<p ng-repeat="model in models">
{{model.states}} - {{model.cities}}
</p>
</center>
</body>

</html>


Output:

Here you can see that we added multiple options under the categories ‘State’ and ‘City’.  

Frequently Asked Questions

Q1: What is data ng-repeat?
Ans1: The data-ng-repeat directive allows validators that don't understand Angular to validate the HTML.

Q2: What is the difference between ng-repeat and Ng for?
Ans2: For each element of the collection, ng-repeat generates an inherited child scope, while *ngFor creates a local variable in that block.

Q3: What is the ng-controller in Angular?
Ans3: 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.

Key Takeaways

In this article, we learned to add Dynamic Options for Multiple Selects inside ng-repeat Directive.

Want to build websites but don't know where to start?
 
Start from here; enroll today and build unique websites using Node. Click on the given link to enroll.

 

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think