angularjs - 根据AngularJS 1.x中先前下拉列表中的值生成下拉列表的动态编号

Question

我有以下要求：我有一个包含员工记录的下拉列表，并且在页面加载时填充（JSON 格式）。在该数据列表中，我有一个值作为 Approval Level，它是一个整数值。

现在我希望当我选择员工时，根据他的批准级别值，我希望下拉列表中没有填写员工数据。意味着当我选择批准级别为 5 的员工时，我希望下面的 5 个下拉列表填充员工记录

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); }); }; 员工列表（）；

$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;
};

标签： angularjsangularjs-ng-repeatangularjs-ng-optionsangularjs-select