javascript - angularjs 中的下拉列表没有被填满

Question

我有一个 dropdownlist，我想使用 angularjs 来填充它。所以我尝试如下

var app = angular.module('App', []);

app.controller('UserSelection', function ($scope, $location) {
var User = this;
User.onSelectChange = function () {
    if (User.UserSelected == 'SAP_Executive') {
        window.location.href = '/App/Assign';
    } else if (User.UserSelected == 'Fiber_Engineer') {
        window.location.href = '/App/Certify';
    } else if (User.UserSelected == 'Fiber_Lead' || User.UserSelected == 'CMM') {
        window.location.href = '/App/Approval';
    } else {
        window.location.href = '/';
    }
};
});


/******************************** R4G State bind ****************************************************/

var assign = angular.module('Assign', []);
assign.factory('SAPExecutive_Service', ['$http', function ($http) {
//this.getDate = function () {
var SAPExecutive_Service = {};
SAPExecutive_Service.getBillCutDate = function () {
    return $http({
        method: "POST",
        url: AppConfig.PrefixURL + "App/GetBillCutDate",
        dataType: 'json',
        headers: { "Content-Type": "application/json" }
    });
};

SAPExecutive_Service.setBillCutDate = function (Data) {
    return $http({
        method: "POST",
        url: AppConfig.PrefixURL + "App/SetBillCutDate",
        data: JSON.stringify(Data),
        dataType: 'json',
        headers: { "Content-Type": "application/json" }
    });
};

SAPExecutive_Service.getR4GState = function (Values) {
    return $http({
        method: "POST",
        url: AppConfig.PrefixURL + "App/GetR4GStates",
        dataType: 'json',
        data: JSON.stringify(Values),
        headers: { "Content-Type": "application/json" }
    })
};

SAPExecutive_Service.getGridDataByState = function (Data) {
    return $http({
        method: "POST",
        url: AppConfig.PrefixURL + "App/GetMPFilter",
        dataType: 'json',
        data: JSON.stringify(Data),
        headers: { "Content-Type": "application/json" }
    })
};

SAPExecutive_Service.setVendorCodeToMP = function (Data) {
    return $http({
        method: "POST",
        url: AppConfig.PrefixURL + "App/AssignVendorMP",
        dataType: 'json',
        data: JSON.stringify(Data),
        headers: { "Content-Type": "application/json" }
    })
};

return SAPExecutive_Service;

}]);

assign.controller('SAPExecutive_Filter', function ($scope, $http, SAPExecutive_Service) {
var Filter = this;
var StateList = {};
var ZoneValue = "";
$scope.UserName = $('.userName').text();
var LocObj = JSON.parse(UMSLocationDetails);
$.each(LocObj, function (index, element) {
    ZoneValue += element.LocationID + ",";
});

ZoneValue = ZoneValue.substr(0, ZoneValue.length - 1);
var Values = { "MaintZones": ZoneValue };

getBillCutDate();
function getBillCutDate() {
    SAPExecutive_Service.getBillCutDate()
        .then(function (dateVal) {
            $scope.BillCutdate = JSON.parse(dateVal.data)[0].BILLING_DATE;
            $scope.BillCutdateSet = $scope.BillCutdate;
        });
}


$scope.changeBillDate = function () {
    var dateVal = $scope.BillCutdateSet;
    var userName = $scope.UserName;
    var Values = { "dateVal": dateVal, "UserName": userName };
    SAPExecutive_Service.setBillCutDate(Values).then(function (response) {
        if (response.data == 'SUCCESS') {
            $scope.BillCutdate = $scope.BillCutdateSet;
        }

    });
}
$scope.UTILITYS = ['SITE', 'FIBER', 'OTHERS'];
$scope.UtilityModel = 'SITE';

getR4GStateList(Values);
function getR4GStateList(Values) {
    SAPExecutive_Service.getR4GState(Values).then(function (response) {
        $scope.State = response.data;
    });
}

$scope.getMPListData = function () {
    var stateid = $('#SAPExecutive_R4GState').val();
    var utility = $('#SAPExecutive_ddlUtility').val();
    if (stateid == 0) {
        jAlert(ValidationMessageConfig.R4GState, ValidationMessageConfig.Title, { 'theme': 'red' });
        return false;
    }
    else if (utility == 0) {
        jAlert(ValidationMessageConfig.Utility, ValidationMessageConfig.Title, { 'theme': 'red' });
        return false;
    }
    else {
        var role = UserGrouop.SAP_EXEC;
        var Value = { "strStatename": stateid, "strUtility": utility, "userRole": role }
        SAPExecutive_Service.getGridDataByState(Value).then(function (responce) {
            $scope.MaintenanceZones = JSON.parse(responce.data);
            loadSAPExecutiveGrid(responce.data);
        });
        $('.filter').removeClass('active');
    }
}

});

assign.controller('confirmPopupController', function ($scope, $http, SAPExecutive_Service) {
$scope.submitForm = function () {
    var stateid = $('#SAPExecutive_R4GState').val();
    var role = UserGrouop.SAP_EXEC;
    var table = $(assignVendor).DataTable();
    var UtilityType = $('#SAPExecutive_ddlUtility').val().split(':')[1];
    var ZoneValue = "";
    var vendorName = $('#txtAssignVendor').val();
    var vendorCode = $('#vendorCode').val();
    var frmDate = $('#txtFromDateVendorAssign').val();
    var dtFrom = moment(frmDate).format('DD/MM/YYYY');
    var toDate = $('#txtToDateVendorAssign').val();
    var dtTo = moment(toDate).format('DD/MM/YYYY');
    var userName = $scope.UserName;
    var data = table.rows('.selected').data();
    $.each(data, function (index, element) {
        ZoneValue += element.MP_CODE + ",";
    });
    ZoneValue = ZoneValue.substr(0, ZoneValue.length - 1);
    var Values = { "MaintZones": ZoneValue, "VendorCode": vendorCode, "UtilityType": UtilityType, "FromDate": dtFrom, "ToDate": dtTo, "UserName": userName };
    SAPExecutive_Service.setVendorCodeToMP(Values)
        .then(function (dateVal) {
            if (dateVal.data == 'SUCCESS') {
                //closePopup('.confirmPopup');
                $('.confirmPopup').hide();
                $('#txtAssignVendor').val('');
                $('#vendorCode').val('');
                $('#txtFromDateVendorAssign').val('');
                $('#txtToDateVendorAssign').val('');
                jAlert(ValidationMessageConfig.SuccessVendor, ValidationMessageConfig.Title);
                var Value = { "strStatename": stateid, "strUtility": UtilityType, "userRole": role }
                SAPExecutive_Service.getGridDataByState(Value).then(function (responce) {
                    $scope.MaintenanceZones = JSON.parse(responce.data);
                    loadSAPExecutiveGrid(responce.data);
                });
                clearVendorSection_SAPExce();
            }
        });
    }
});



/************** Certify ***************************/

assign.controller('FiberEngineer_Filter', function ($scope, $http, SAPExecutive_Service) {

var Filter = this;
var StateList = {};
var ZoneValue = "";
$scope.UserName = $('.userName').text();
var LocObj = JSON.parse(UMSLocationDetails);
$.each(LocObj, function (index, element) {
    ZoneValue += element.LocationID + ",";
});

ZoneValue = ZoneValue.substr(0, ZoneValue.length - 1);
var Values = { "MaintZones": ZoneValue };

getR4GStateList(Values);

getMaintPointList(Values);

function getR4GStateList(Values) {
    SAPExecutive_Service.getR4GState(Values).then(function (response) {
        $scope.State = response.data;
    });
}

function getMaintPointList(Values) {
    SAPExecutive_Service.getMaintPoint(Values).then(function (response) {
        $scope.MaintP = response.data;
    });
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rightFilter" ng-controller="FiberEngineer_Filter as Filter" id="FiberEngineer_Filter">
            <!--Note-->
            <div class="note">
                <span>Note :</span> <i>Billing Cut-off Date : <strong>28</strong></i><i>Scheduler Last Run : <strong>10-09-2019 00:00:00</strong></i>
            </div>
            <!--Filter-->
            <div class="filter">
                <a class="showHideFilter"><i class="fa fa-filter" aria-hidden="true"></i> <b>Show Filter</b></a>
                <div class="filterContent clearfix">
                    <div class="filterFields">
                        <div class="row">
                            <div class="col-md-10">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>R4G State</label>
                                            <select id="FiberEngineer_R4GState" class="form-control">
                                                <option ng-repeat="state in State" value="{{state.Value}}">
                                                    {{state.Text}}
                                                </option>
                                            </select>
                                            <span class="error">Select R4G State</span>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Maintenance Point</label>
                                            <select class="form-control" id="FiberEngineer_MaintP">
                                                <option ng-repeat="maintP in MaintP" value="{{maintP.Value}}">
                                                    {{maintP.Text}}
                                                </option>
                                            </select>
                                            <span class="error">Select Maintenance Point</span>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Utility Type</label>
                                            <select class="form-control" id="ddlut" name="ddlut">
                                                <option>Select</option>
                                            </select>
                                            <span class="error">Select Utility Type</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label class="hidden-xs">&nbsp;</label>
                                    <button class="btn btn-default customBtn" onclick="return GetAssignorCertifyData();"><i class="fa fa-filter" aria-hidden="true"></i> Filter</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="pdfDownload">
                        <div class="customeRadio">
                            <input type="radio" id="btnCurrentMP" name="radio-group">
                            <label for="btnCurrentMP">Current MP</label>
                        </div>
                        <div class="customeRadio">
                            <input type="radio" id="btnAllMP" name="radio-group">
                            <label for="btnAllMP">All MP</label>
                        </div>
                        <button class="btn btn-default customBtn"><i class="fa fa-file-pdf-o" aria-hidden="true"></i> PDF Download</button>
                    </div>
                </div>
            </div>
        </div>

注意 我想在FiberEngineer_MaintP 列表中添加数据。 js函数是getMaintPointList(Values);

但它没有被填满

控制台错误是angular.js:15536​​ TypeError: SAPExecutive_Service.getMaintPoint is not a function

Answer 1

在聊天中讨论了上述问题后，最终目标是将 UMSLocationDetails 的内容设置到下拉列表中。

我们改变了

var LocObj = JSON.parse(UMSLocationDetails);

作用域变量:

$scope.MaintP = JSON.parse(UMSLocationDetails);
$scope.SelectedMaintP = $scope.MaintP[0];

并将html修改为:

<select class="form-control" ng-options="value.LocationID for (key, value) in MaintP" ng-model="SelectedMaintP" id="FiberEngineer_MaintP"></select>