I have the following requirement: I have one drop-down list containing Employee records and which is getting filled on page load (JSON format). In that data list I have one value as Approval Level which is an integer value.
Now I want that when I select employee ,as per his Approval Level value I want that no of drop down list get filled with employee data. Means when I select employee whose Approval Level is 5, I want 5 drop down list below that get filled with Employee records
HTML:-
<div class="col-md-6">
<select class="form-control crl dropdown" placeholder="Approval Level" name="ApprovalLevel" id="ApprovalLevelDDL" required ng-model="insert.Approval_Level" ng-change="makeArray()">
<option value="">Employee Name</option>
<option value="{{list.Approval_Level}}" ng-repeat="list in EmpList">{{list.Emp_Name}}</option>
</select>
<span style="color:red" class="error" ng-show="myForm.DesignationName.$error.required || myForm.DesignationName.touched.required">
Require
</span>
</div>
</div>
<div class="row col-md-10 col-md-offset-1 mypadd" ng-repeat="o in arr">
<div class="col-md-6">
<label for="DepartmentHead">Approval Head</label>
</div>
<div class="col-md-6">
<select class="form-control crl dropdown" placeholder="Approval Level" name="ApprovalLevel_{{$index}}" id="ApprovalLevelDDL_{{$index}}" required ng-model="selectedItem" ng-change="HeadEmployeeList({{$index}})" ng-options="list.Emp_ID as list.Emp_Name for list in ddlArr">
</select>
</div>
</div>
Angular Controller:- function EmployeeList() { $http({ method: "POST", url: "/Employee/GetEmployeeList/", datatype: "json", headers: { "ContentType": "application/json" }, }).then(function (data) { $scope.EmpList = data.data.EmpList; $rootScope.DataList = data.data.EmpList; $scope.edatalist = data.data.EmpList; console.log($rootScope.DataList); }).catch(function (data) { $scope.error = data.data; console.log($scope.error); }); }; EmployeeList();
$scope.EmployeeDataList = function () {
$http({
method: "POST",
url: "/Employee/GetEmployeeList/",
datatype: "json",
headers: { "ContentType": "application/json" },
}).then(function (data) {
//$rootScope.DataList = data.data.EmpList;
$scope.edatalist = data.data.EmpList;
console.log($scope.edatalist);
}).catch(function (data) {
$scope.error = data.data;
console.log($scope.error);
});
};
$scope.insert = $rootScope.DataList;
$scope.arr = [];
$scope.newardata = [];
$scope.ddlArr = [];
$scope.makeArray = function () {
console.log($scope.insert);
$scope.arr.length = 0;
$scope.EmpList.Emp_ID = parseInt($scope.EmpList.Emp_ID, 10);
$scope.EmployeeDataList();
for (var i = 0; i <= parseInt($scope.insert.Approval_Level) ; i++) {
$scope.arr.push(i);
$scope.EmpList[i].Emp_ID = parseInt($scope.EmpList[i].Emp_ID, 10);
$scope.ddlArr.push($scope.EmpList[i]);
}
$scope.newardata = $scope.arr;
console.log($scope.arr);
console.log($scope.ddlArr);
}
console.log($scope.newardata);
var Emplist = [];
var EDATA = [];
$scope.HeadEmployeeList = function (id) {
console.log($scope.newardata);
var eid = {};
console.log(Emplist);
var data = parseInt(this.EmpList.Emp_ID);
console.log(data);
var index = Emplist.indexOf(parseInt(this.insert.Emp_ID));
var subindex = EDATA.indexOf(parseInt($scope.EmpList.Emp_ID,10));
console.log(index);
console.log(subindex);
if (index < 0){
Emplist.push(this.insert.Emp_ID);
EDATA.push($scope.EmpList.Emp_ID,10);
}
console.log(Emplist.indexOf(this.insert.Emp_ID));
console.log(Emplist);
console.log(EDATA.indexOf(parseInt($scope.EmpList.Emp_ID,10)));
console.log(EDATA);
$scope.EDATA = EDATA;
};