0

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;
};
  • The question does not include the code that is causing the problem. Please provide an [MVCE](https://stackoverflow.com/help/mcve). That code should be... **Complete** – Provide all parts needed to reproduce the problem. – georgeawg Jul 18 '18 at 17:38
  • @georgeawgIreached up to hear.....but I don't how should I implement what I want to...…………. – Amey Chitale Jul 18 '18 at 19:07
  • Use the `ng-change` directive to invoke a function to update the second selector when the users changes the first selector. – georgeawg Jul 18 '18 at 23:45

0 Answers0