从 WebAPI 获取数据并使用 AngularJs 将其加载到下拉列表中答案

【问题标题】：Getting data from WebAPI and loading it in dropdown using AngularJs从 WebAPI 获取数据并使用 AngularJs 将其加载到下拉列表中
【发布时间】：2016-10-19 00:30:51
【问题描述】：

我正在尝试从数据库加载下拉列表，不知道是什么导致了问题，但看不到它已加载或从 web 服务返回。

我创建了一个单独的 webapi 项目，当我直接从浏览器调用 api 方法时，它会返回如下 JSON 格式的数据

    <ArrayOfGetCustomersList_Result xmlns:i="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.datacontract.org/2004/07/Repository">
<GetCustomersList_Result>
<cust_name>Alex Fraser Group : Alex Fraser</cust_name>
<custid>Alex Fraser</custid>
<customer_auto>24</customer_auto>
</GetCustomersList_Result>
<GetCustomersList_Result>
<cust_name>BMA : BMA</cust_name>
<custid>BMA</custid>
<customer_auto>16</customer_auto>
</GetCustomersList_Result>
<GetCustomersList_Result>
<cust_name>DEMO CUSTOMER 1 : DEMO CUSTOMER 1</cust_name>
<custid>DEMO CUSTOMER 1</custid>
<customer_auto>1</customer_auto>
</GetCustomersList_Result>
<GetCustomersList_Result>
<cust_name>Hydraulink Toowoomba : Hydraulink Toowoomba</cust_name>
<custid>Hydraulink Toowoomba</custid>
<customer_auto>21</customer_auto>
</GetCustomersList_Result>
<GetCustomersList_Result>
<cust_name>QA Trackspares : QA Trackspares</cust_name>
<custid>QA Trackspares</custid>
<customer_auto>22</customer_auto>
</GetCustomersList_Result>
<GetCustomersList_Result>
<cust_name>Timms Contracting : Timms</cust_name>
<custid>Timms</custid>
<customer_auto>23</customer_auto>
</GetCustomersList_Result>
<GetCustomersList_Result>
<cust_name>UNKNOWN : UNKNOWN</cust_name>
<custid>UNKNOWN</custid>
<customer_auto>17</customer_auto>
</GetCustomersList_Result>
</ArrayOfGetCustomersList_Result>

我的 Angular 服务代码是：

var app = angular.module('dashboardModule', ['oc.lazyLoad', 'directive.contextMenu'])
.service('dashboardService', ['$http', function ($http) {

    this.loadCustomers = function (onSuccess, onError) {

        onError = onError || function () { alert('Failure getting customers'); };
        $http
            .get('http://localhost:7999/api/dashboard/GetCustomersList')
            .success(onSuccess)
            .error(onError);
    };

}]);

我从我的 Angular 控制器中调用它：

angular.module('dashboardModule')
        .controller('dashboardController', ['$scope', '$rootScope', '$location', '$translate', 'dashboardService', function ($scope, $rootScope, $location, $translate, dashboardService) {

        $scope.customers = [];
        dashboardService.loadCustomers(customersLoaded,erroroccured);

        function erroroccured(response)
        {
            alert(response.data);
        }
        function customersLoaded(response) {
            $scope.customers=response.data;
        }

        $scope.selectedCustomer = $scope.customers[0].customer_auto;
    }
]);

在我的 html 页面上，我试图将其加载为

<div class="col-sm-2"><select class="form-control" ng-model="selectedCustomer" ng-options="customer.customer_auto as (customer.custid+':'+customer.cust_name) for customer in customers">></select></div>

谁能告诉我代码中有什么问题。我确实在 IE 调试器中收到此错误

无法获取未定义或空引用的属性“customer_auto”

【问题讨论】：

标签： angularjs asp.net-web-api

【解决方案1】：

如果 ajax 调用出现问题，它看起来会在 erroroccured 方法中向您发送警报。是点击错误回调方法还是服务器成功返回数据？

同样在您的 web api 项目中，尝试添加以下内容：这将使您的服务返回有效的 JSON 而不是 XML。

var formatters = GlobalConfiguration.Configuration.Formatters;

formatters.Remove(formatters.XmlFormatter);

【讨论】：