Auto populate one dropdown based on other dropdown value change in Angular JS
Auto populate one dropdown value based on other dropdown value change in Angular JS:
As we know Angular JS is a two way data binding, mapping the $scope variable in the html/view file will map and bind the updated value which we are assigning/updating in the controller.
I recommend you to study Angular JS Hello world for dummies post if you do not have much idea about angular JS.
Requirements:
We need jquery.min.js & angular.min.js to work with any angular js module/project. But in our project we used bootstrap for responsive design. So need to include bootstrap.min.js and bootstrap.css file as well.
Note: Do not struggle to find the links to download all the below required js and css files, everything you will get by just clicking download.
Ensure you have added the below entries in your index.html file, ensure the order also as mentioned as below,
Including required JS Files:
<script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/angular.min.js"></script> <script src="js/jd-custom.js"></script>
Including required CSS Files:
<link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/font-awesome.min.css" rel="stylesheet"> <link href="css/animate.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet">
How normal project will become angular js project ?
- You need to add ng-app and ng-controller attribute to the body tag.
<body data-ng-app="cpnModule" data-ng-controller="cpnCntrolr" >
2. You need to add the above mentioned JS files, atleast jquery.min.js and angular.min.js should be added to the html file.
3. Create a custom js file named jd-custom.js and include this as well in your html file and create the $scope this way,
// cpnModule is the given module name in body tag of data-ng-app attribute
$cpnModule = angular.module('cpnModule', []);
//cpnCntrolr is the given controller name in body tag of data-ng-controller attribute
$cpnModule.controller('cpnCntrolr',function($scope, $http){
}
Difference between ng-app and data-ng-app or ng-controller and data-ng-controller
With just the above 3 ways we can convert our normal html file to angular js project file.
index.html file:
<div class="container">
<div class="clearfix"></div>
<h4 class="title text-center" style="margin-top:100px;">Angular JS | Auto populate one dropdown based on other dropdown value change source code Angular JS</h4>
<div class="row" style="margin-top:50px;">
<div class="col-xs-12 animated fadeInDown">
<form novalidate name="CouponzForm" >
<div class="row">
<div class="form-group col-md-6 col-xs-12 col-sm-6 col-lg-6">
<label for="state">India States</label>
<select id="state" name="state" class="form-control" data-ng-model="tempUser.state" data-ng-change="stateCapitalChange()" data-ng-options="value.state as value.state group by value.group for value in state_capitals">
<option>--</option>
</select>
</div>
<div class="form-group col-md-6 col-xs-12 col-sm-6 col-lg-6">
<label for="capital">State Capital</label>
<select id="capital" name="capital" class="form-control" data-ng-model="tempUser.state" ng-change="stateCapitalChange()">
<option ng-repeat="value in state_capitals" value="{{value.state}}">{{value.capital}}</option>
</select>
</div>
</div>
<div class="row">
State you have selected is : {{tempUser.state}}
Capital of the state you have selected is :{{capital}}
</div>
</form>
</div>
</div>
</div>
we have used two dropdowns or select with the same ng-model or data-ng-model. Because we need to auto populate the second dropdown based on the first dropdown value change.
Two ways of populating the select option in angularjs using ng-repeat:
1. Using data-ng-options attribute in select tag.
syntax:
data-ng-options="value.state as value.state group by value.group for value in state_capitals"
Full code block:
<select id="state" name="state" class="form-control" data-ng-model="tempUser.state" data-ng-options="value.state as value.state group by value.group for value in state_capitals" required> <option>--</option> </select>
2. Using data-ng-repeat attribute in option tag of select.
Syntax:
<option ng-repeat="value in state_capitals" value="{{value.state}}">{{value.capital}}</option>
Full code block:
<select id="capital" name="capital" class="form-control" data-ng-model="tempUser.state" required>
<option ng-repeat="value in state_capitals" value="{{value.state}}">{{value.capital}}</option>
</select>
Things to Note:
1. state_capitals is the array which is populated in the controller of jd-custom.js file like this,
$scope.state_capitals = [{state: 'TamilNadu',capital: 'Chennai'},{state: 'Maharastra',capital: 'Mumbai'},{state: 'Delhi',capital: 'New Delhi'},{state: 'Karnataka',capital: 'Bangalore'}];
2. value is the variable name like (for)loop variable.
jd-custom.js file:
/*
Site: Javadomain.in
Author: Naveen kumar Gunasekaran
*/
// cpnModule is the given module name in body tag of data-ng-app attribute
$cpnModule = angular.module('cpnModule', []);
//cpnCntrolr is the given controller name in body tag of data-ng-controller attribute
$cpnModule.controller('cpnCntrolr',function($scope, $http){
$scope.tempUser = {};
$scope.capital = '';
$scope.tempUser.state = 'TamilNadu';
// array of values to populate in the select option list
$scope.state_capitals = [{state: 'TamilNadu',capital: 'Chennai'},{state: 'Maharastra',capital: 'Mumbai'},{state: 'Delhi',capital: 'New Delhi'},{state: 'Karnataka',capital: 'Bangalore'}];
// on change of state
$scope.stateCapitalChange=function(){
// iterating the state_capitals array to get the capital by passing the state name, since in both the select model mapped to state // only
for (var i = 0; i < $scope.state_capitals.length ; i++) {
if ($scope.state_capitals[i]['state'] === $scope.tempUser.state) {
$scope.capital = $scope.state_capitals[i]['capital'];
break;
}
}
}
});
We have iterated the state_capitals array and retrieved the capital value, because in UI both the select is mapped with the state in ng-model.
for (var i = 0; i < $scope.state_capitals.length ; i++) {
if ($scope.state_capitals[i]['state'] === $scope.tempUser.state) {
$scope.capital = $scope.state_capitals[i]['capital'];
break;
}
}
hope you understood how to “Auto populate one dropdown value based on other dropdown value change in Angular JS”.