如何使用Angular.js使用AJAX调用来填充多个选择字段到不同的端点

Question

我为这个问题可能缺乏清晰度而道歉，但我是Angular.js的新手，我对它的了解仍然有点模糊。我已经完成了Angular.js教程并用google搜索答案，但我还没有找到任何答案。

我有多个select / option html元素，而不是表单元素，我正在使用AJAX填充它们。每个表单域都由来自不同SharePoint列表的值填充。我想知道是否有办法使用Angular.js实现这个？

我想考虑使用Angular来构建它，因为我喜欢它的一些功能，例如数据绑定，路由和按组件组织代码。但是在使用DRY原理进行编码时，我无法完全理解如何在这种情况下实现它。

目前，我有一个AJAX.js文件，我有一个Javascript文件，其中包含我需要连接的不同端点的数组以及特定的查询参数。当我的页面加载时，我循环遍历数组，对于每个元素，我调用GET方法并将端点详细信息传递给它。

然后代码继续在页面上找到相应的select元素，并附加ajax调用返回的option元素。

我是Angular的新手，但据我所知，我可以为每个select元素创建一个自定义组件。我将组件放在页面上，所有与该组件关联的选项和选项都会出现在那里。我见过的示例演示了，将ajax调用与组件的代码相关联。我想我可以使用服务并让每个组件都依赖于该服务，组件会将其特定的查询详细信息传递给服务的ajax调用。

我当前的代码 - 程序流程：main - ＆gt;数据检索 - ＆gt;对象创建|主要 - ＆gt;形式建设。

从index.html调用 - 创建传递给ajax调用的多个查询字符串 - 每个查询字符串的ajax调用一次 - 文件中的最后一个函数是调用另一个函数来构建表单元素。 / p>

var snbApp = window.snbApp || {};

snbApp.main = (function () {
    var main = {};
    main.loadCount = 0;

    main.init = function () {

        function buildSelectOptions(){

            //***
            //Build select options from multiple SharePoint lists
            //***
            var listsArray = snbApp.splistarray.getArrayOfListsForObjects();

            for(var i = 0; i < listsArray.length; i++){
                var listItem = listsArray[i];
                var qryStrng =  listItem.list +
        "?$select=" + listItem.codeDigits + "," + listItem.codeDescription + "," + listItem.ItemStatus + "&$orderby=" + listItem.codeDescription + "&$filter="+listItem.ItemStatus+" eq true" + "&$inlinecount=allpages"

                var listDetails = {
                    listName: listItem.list,
                    listObj: listItem,
                    url: "http://myEnv/_vti_bin/listdata.svc/" + listItem.list +
        "?$select=" + listItem.codeDigits + "," + listItem.codeDescription + "," + listItem.ItemStatus + "&$orderby=" + listItem.codeDescription + "&$filter="+listItem.ItemStatus+" eq true" + "&$inlinecount=allpages"
                };
                var clientContext = new SP.ClientContext.get_current();
                clientContext.executeQueryAsync(snbApp.dataretriever.letsBuild(listDetails), _onQueryFailed);

            }

            //***
            //Build select option from other API endpoint
            //***
            var listDetails = {
                listName:"SNB_SecondaryActivityCodes",
                url: "http://myEnv/requests/odata/v1/Sites?$filter=(IsMajor eq true or IsMinor eq true) and IsActive eq true and IsPending eq false and CodePc ne null and IsSpecialPurpose eq false&$orderby=CodePc"
            };
            snbApp.dataretriever.letsBuild(listDetails);
        }

        buildSelectOptions();

        //***
        //Add delay to populate fields to ensure all data retrieved from AJAX calls
        //***
        var myObj = setTimeout(delayFieldPopulate,5000);

        function delayFieldPopulate(){
            var optObj = snbApp.optionsobj.getAllOptions();
            var osType = $("input[name=os_platform]:checked").val();
            snbApp.formmanager.buildForm(osType, optObj);

        }
    };

    function _onQueryFailed(sender, args) {
        alert('Request failed.\nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());
    }

    return main
})();

这里调用AJAX - 从main / previous文件调用：

var snbApp = window.snbApp || {};

snbApp.dataretriever = (function () {
    var listsArray = snbApp.splistarray.getArrayOfListsForObjects();

    function getListData(listItem) {

        var eventType = event.type;
        var baseURL = listItem.url;

        $.ajax({
            url: baseURL,
            type: "GET",
            headers: {
                "accept": "application/json;odata=verbose",
            }
        })
        .done(function(results){
            snbApp.objectbuilderutility.buildObjectFields(results, listItem);

        })
        .fail(function(xhr, status, errorThrown){
            //console.log("Error:" + errorThrown + ": " + myListName);
        });
    }

    function _onQueryFailed(sender, args) {
        alert('Request failed.\nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());
    }

    return{
        letsBuild:function(item) {
            getListData(item);
        }
    };

})();

构建项目名称对象 - 从递归AJAX调用/上一个文件

调用

var snbApp = window.snbApp || {};
snbApp.objectbuilderutility = (function () {
    function formatItemCode(itemCode, eventType){
        if(eventType !== 'change'){ //for load event
            var pattern = /^CE/;
            var result = pattern.test(itemCode);
            if(result){
                return itemCode.slice(2);
            }else{
                return itemCode.slice(0,3);
            }
        }else{ //for change event
            var pattern = /^CE/;
            var result = pattern.test(itemCode);
            if(result){
                return itemCode.slice(2);
            }else{
                return itemCode.slice(3);
            }
        }   
    }

    return{
        buildObjectFields: function(returnedObj, listItem){ //results:returnedObj, prevItem:listItem
            //***
            //For SharePoint list data
            //***
            if (listItem.listName !== "SNB_SecondaryActivityCodes") {
                var theList = listItem.listName;
                var firstQueryParam = listItem.listObj.codeDigits;
                var secondQueryParam = listItem.listObj.codeDescription;
                var returnedItems = returnedObj.d.results;
                var bigStringOptions = "";

                //regex to search for SecondaryFunctionCodes in list names
                var pattern = /SecondaryFunctionCodes/;
                var isSecFunction = pattern.test(theList);
                if(isSecFunction){
                    bigStringOptions = "<option value='0' selected>Not Applicable</option>";
                }else{
                    bigStringOptions = "<option value='0' disabled selected>Select Option</option>";
                }

                $.each(returnedItems, function (index, item) {
                    var first = "";
                    var second = "";
                    for (var key in item) {
                        if (item.hasOwnProperty(key)) {
                            if (key != "__metadata") {
                                if (key == firstQueryParam) {
                                    first = item[key];
                                }
                                if (key == secondQueryParam) {
                                    second = item[key];
                                }
                            }
                        }
                    }
                    bigStringOptions += "<option value=" + first + " data-code=" + first + ">" + second + "</option>";
                });

                var str = theList.toLowerCase();
                snbApp.optionsobj.updateFunctionOrActivity(theList.toLowerCase(), bigStringOptions);

                //***
                //For other API
                //***
            } else {
                var theList = listItem.listName;
                var bigStringOptions = "<option value='0' disabled selected>Select Option</option>";
                var returnedItems = returnedObj.value;

                for(var i = 0; i < returnedItems.length; i++){

                    var item = returnedItems[i];

                        //***
                        //change event type means the user selected a field
                        //***
                        if(listItem.eventType === "change"){
                            var siteCodeChange = item.SiteCodePc;
                            if (typeof siteCodeChange === "string" & siteCodeChange != "null") {
                                siteCodeChange = siteCodeChange < 6 ? siteCodeChange : siteCodeChange.slice(3);
                            }

                            bigStringOptions += "<option value='" + item.Id + "' data-code='" + siteCodeChange + "' data-isDivSite='" + item.IsDivisionSite + "' data-isDistSite='" + item.IsDistrictSite + "' data-divID='" + item.DivisionSiteId + "' data-distID='" + item.DistrictSiteId + "'>(" + siteCodeChange + ") " + item.Name + "</option>";

                            snbApp.formmanager.buildSelectSiteLocations(bigStringOptions);

                        //***
                        //load event which means this happens when the page is loaded
                        //***
                        }else{

                            var siteCodeLoad = item.SiteCodePc;
                            if (typeof siteCodeLoad === "string" & siteCodeLoad != "null") {
                                var siteCodeLoad = siteCodeLoad.length < 4 ? siteCodeLoad : siteCodeLoad.slice(0, 3);
                            }

                            bigStringOptions += "<option value='" + item.Id + "' data-code='" + siteCodeLoad + "' data-isDivSite='" + item.IsDivisionSite + "' data-isDistSite='" + item.IsDistrictSite + "' data-divID='" + item.DivisionSiteId + "' data-distID='" + item.DistrictSiteId + "'>(" + siteCodeLoad + ") " + item.Name + "</option>";

                            snbApp.optionsobj.updateFunctionOrActivity(theList.toLowerCase(), bigStringOptions);    
                        }

                }

            }              
        }
    };
})();

表单管理 - 从上一个文件调用，获取页面上的所有选择元素，并将前一个文件中对象的项目附加到每个select元素。

var snbApp = window.snbApp || {};

//Direct interface to the form on the page
snbApp.formmanager = (function(){
    var form = {};
    form.content_holder = document.getElementById("content_holder"); 
    form.sec_act_codes = document.getElementById("snb_secondary_activity_codes"); 
    form.prim_func_codes = document.getElementById("snb_primary_function_codes"); 
    form.sec_func_codes = document.getElementById("snb_secondary_function_codes"); 
    form.sec_func_nums = document.getElementById("snb_secondary_function_numbers"); 
    form.host_options = document.getElementById("snb_host_options"); 
    form.site_locs_div = document.getElementById("site_locations_div"); 
    form.site_locs = document.getElementById("snb_site_locations"); 
    form.dc_or_off_prem_div = document.getElementById("dc_or_off_premise_div"); 
    form.dc_off_prem_codes = document.getElementById("snb_dc_offpremise_codes"); 

    var snb_secondary_activity_codes = "";
    var snb_primary_function_codes = "";
    var snb_secondary_function_codes = "";
    var snb_secondary_function_numbers = "";
    var snb_host_options = "";
    var snb_site_locations = "";
    var snb_dc_op = "";


    //builds the server location hosting options selection
    function buildLocationTypeSelector() {
        var locationOptionsString = "<option value='0' disabled selected>Select Option</option>";
        for (var i = 0; i < locationOptions.length; i++) {
            var location = locationOptions[i];
            locationOptionsString += "<option value=" + location.hostLocale + " data-code=" + location.code + ">" + location.hostLocale + "</option>";
        }
        $("#snb_host_options").append(locationOptionsString);
    }

    function buildSiteLocations(bigString){
        if(bigString === undefined){
            var siteLocs = document.getElementById("snb_site_locations");
            var newOption = document.createElement("option");

            newOption.setAttribute("value", 0);
            newOption.setAttribute("disabled","disabled");
            newOption.setAttribute("checked","checked");

            var newText = document.createTextNode("Select Option");
            newOption.appendChild(newText);
            siteLocs.appendChild(newOption);
        } else{
            var siteLocs = document.getElementById("snb_site_locations");
            siteLocs.innerHTML = bigString;
        }   
    }



    return {
        form:form,
        buildSelectSiteLocations: function(bigString){
            buildSiteLocations(bigString);
        },
        buildForm: function (osType, optObj) {
          buildLocationTypeSelector();
          buildSecondaryFunctionNumberSelector();
          buildSiteLocations();

          if(osType === 'windows'){
            $("#snb_secondary_activity_codes").append(optObj.windows.secondary_activity);
            $("#snb_primary_function_codes").append(optObj.windows.primary_function);
            $("#snb_secondary_function_codes").append(optObj.windows.secondary_function);
            $("#snb_site_locations").append(optObj.windows.site_location);
            $("#snb_dc_offpremise_codes").append(optObj.windows.dc_offpremise);
          }else{
            $("#snb_secondary_activity_codes").append(optObj.unix.secondary_activity);
            $("#snb_primary_function_codes").append(optObj.unix.primary_function);
            $("#snb_secondary_function_codes").append(optObj.unix.secondary_function);
            $("#snb_site_locations").append(optObj.unix.site_location);
            $("#snb_dc_offpremise_codes").append(optObj.unix.dc_offpremise);
          }
        }
    };
})();

提前致谢。