Selection of one
dropdownlist resulting the data in another dropdownlist is nothing but the
cascading dropdowns where we may face this functionality frequently while
developing web apps. Ex: based on our country selection from one dropdown
displaying its state in another drodownlist.
ng-options is the
directive that which can be used to the select tag type markup elements and can
able to pass object details also to its concern element.
If you are new to dropdownlist in angular JS please have a look on my article “Dropdownlist in angular JS”.
Initially let me
create relational static object data variables as like below :
//Departments data
var
departments = [
{ "id": 1, "Dname": "Architect" },
{ "id": 2, "Dname": "Developer" },
{ "id": 3, "Dname": "Tester" },
];
// Employee data (did is like relational ppropety b/n dept
and emp data)
var
employees = [
{"id":1, "Ename":"Architect 1", "did": 1},
{ "id": 2, "Ename": "Architect 2", "did": 1 },
{ "id": 3, "Ename": "Architect 3", "did": 1 },
{ "id": 4, "Ename": "Architect 4", "did": 1 },
{ "id": 5, "Ename": "Developer 1", "did": 2 },
{ "id": 6, "Ename": "Developer 2", "did": 2 },
{ "id": 7, "Ename": "Developer 3", "did": 2 },
{ "id": 8, "Ename": "Tester 1", "did": 3 },
{ "id": 9, "Ename": "Tester 2", "did": 3 },
];
Above, I had taken
two variables as departments which is having department list with Id and Dname
followed by another variable employees with id, Ename and did which gives a
relation to the above deparment(just like foreign key in database language).
Next, let us create
a function for getting all the departments.
// For getting countries
$scope.getdepartments = function () {
return departments;
};
Lets write another
function that which can bring all the employees list based on the department ID. This can be done by using filters to our employees data.
To perform filter
operation from the object angular provided us the concept “filters”. The syntax
of its usage will be as below :
$filter(‘filter’)(collectionobject, {
collectionobjectsroerty : ‘valuetofilter’ })
// For getting employees based on the dept ID
$scope.bindEmployees = function () {
alert($scope.dept.id);
var emps = ($filter('filter')(employees,
{ did: $scope.dept.id }, true));
//
For $scope.filteredEmps is to bind employees(collection) in 2nd
dropdownlist
$scope.filteredEmps =
emps;
};
While working with
the filter do remember to provide $filter
dependency in controller function like below:
myapp.controller('ctrlr', ['$scope', '$filter', function ($scope, $filter) {
// code
}
In the above script
we had filtered the things based on the ‘$scope.dept.id’, Not to worry
about it this comes from the model of dropdownlist’s ng-model directive which
can hold the object on doing department selection. please look over below image
for more clarity :
Now let’s create the
departments dropdownlist markup code :
<select ng-model="dept"
ng-change="bindEmployees()"
ng-options="x.Dname for x in getdepartments() track by x.id">
<option value="">--select--</option>
</select>
In the above mark up
code, ng-options is getting the list from the “getdepartments()” function which
returns all our deartments.
ng-model “dept” holds
the properties(dept.id,dept.Dname) of the selected department from the
department dropdownlist.
ng-change directive
:
Whenever user selects
the department from the dropdown the dept details will be logging to “dept”
model and calls the “bindEmployees()” function.
Within the “bindEmployees()” function the filtered employees will be assigned to the “$scope.filteredEmps” model.
Now we can access
the “$scope.filteredEmps” model’s collection
in the second dropdownlist like below :
<select ng-model="emp"
ng-options="x.Ename for x in filteredEmps track by x.id">
<option value="">--select--</option>
</select>
Now the whole code
together comes as like below :
JS Code :
var myapp = angular.module('myapp', []);
myapp.controller('ctrlr',
['$scope', '$filter', function ($scope, $filter) {
//Departments data
var
departments = [
{ "id": 1, "Dname": "Architect" },
{ "id": 2, "Dname": "Developer" },
{ "id": 3, "Dname": "Tester" },
];
// Employee data (did is like relational ppropety b/n dept
and emp data)
var
employees = [
{"id":1, "Ename":"Architect 1", "did": 1},
{ "id": 2, "Ename": "Architect 2", "did": 1 },
{ "id": 3, "Ename": "Architect 3", "did": 1 },
{ "id": 4, "Ename": "Architect 4", "did": 1 },
{ "id": 5, "Ename": "Developer 1", "did": 2 },
{ "id": 6, "Ename": "Developer 2", "did": 2 },
{ "id": 7, "Ename": "Developer 3", "did": 2 },
{ "id": 8, "Ename": "Tester 1", "did": 3 },
{ "id": 9, "Ename": "Tester 2", "did": 3 },
];
// For getting countries
$scope.getdepartments = function () {
return departments;
};
// For getting states based on the country ID
$scope.bindEmployees = function () {
var emps = ($filter('filter')(employees,
{ did: $scope.dept.id }, true));
$scope.filteredEmps =
emps;
};
}]);
View Code :
<body
ng-app="myapp" ng-controller="ctrlr">
<select ng-model="dept"
ng-change="bindEmployees()"
ng-options="x.Dname for x in getdepartments() track by x.id">
<option value="">--select--</option>
</select>
<span>selected Department is : {{ dept.Dname }}</span> <br /><br/>
<select ng-model="emp"
ng-options="x.Ename for x in filteredEmps track by x.id">
<option value="">--select--</option>
</select>
<span>selected Employee is :
{{ emp.Ename }}</span> <br />
</body>
Result :
Video result :
No comments:
Post a Comment