Javascript 如何使用Angular.js使用对不同端点的AJAX调用填充多个select字段

对于这个问题可能不够清晰，我首先表示歉意，但我对Angular.js还不熟悉，对它的了解还有些模糊。我已经完成Angular.js教程并在谷歌上搜索答案，但我没有找到任何答案

我有多个select/option html元素，而不是在表单元素中，我正在使用AJAX填充它们。每个表单字段由来自不同SharePoint列表的值填充。我想知道是否有一种方法可以使用Angular.js实现这一点

我想考虑使用角构建这一点，因为我喜欢它的一些特性，如数据绑定、路由和组件的组织代码。但是，在使用DRY原则编码时，我无法完全理解如何在这种情况下实现它

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

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

我不熟悉Angular，但据我所知，我可以为每个select元素创建自定义组件。我会将该组件放在页面上，所有与该组件关联的选择和选项都会出现在那里。我看到的示例将ajax调用与组件的代码相关联。我认为我可以使用一个服务，让每个组件依赖于该服务，该组件将其特定的查询细节传递给服务的ajax调用

我当前的代码-程序流程：主->数据检索->对象创建|主->表单构建

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

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
})();

构建一个item name对象-从递归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元素，并将上一个文件中的对象中的项附加到每个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);
          }
        }
    };
})();

---

提前谢谢。

有机会看到您的代码吗？因为根据您的描述，您似乎没有正确使用angularjs，所以代码接着在页面上查找相应的select元素，并附加ajax调用返回的option元素。我相信您仍然在考虑好的、旧的或不好的DOM操作，而不是让angular为您处理它Hello Alon。你是对的，我当前的代码使用直接DOM操作，我正试图通过使用Angular来摆脱这一点。我正在编辑我的初始问题，以包括我的一些代码。

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);
          }
        }
    };
})();