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.
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.
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
Here, you can see that we added multiple options under the categories ‘Item’ and ‘Color’. After selection, the webpage will look like this:
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.
117+ registered 