角度http请求后未显示数据

Question

我正在使用带有 angular js 的 asp.net Web 服务，返回客户列表 $http 获得成功，但是当我在下面的 html 上迭代它时没有显示数据

<div ng-app="crudModule" ng-controller="CRUD_OperController" name="myForm" novalidate class="my-form">
    <ol data-ng-repeat="cus in Customers">
        <li>{{ cus.CustomerId }} ,{{ cus.CustomerName }},{{  cus.CustomerAddress }}
    </ol>
</div>

有绑定问题吗？

我的脚本在下面

<script  type="text/javascript">
    var app = angular.module('crudModule', []);

    app.service('studentService', function ($http) {
        this.getAllCustomers = function () {
        var response = $http.get("CustomerService.asmx/GetCustomers");
        return response;
        };
    });


    app.controller('CRUD_OperController', function ($scope, studentService) {
        $scope.Customers = [];

        loadData();

        function loadData() {
            var promiseGet = studentService.getAllCustomers();
            promiseGet.then(
                function (pl) {
                    $scope.Customers = pl.data;
                },
                function (errorPl) {
                    $log.error('Some Error in Getting Records.', errorPl);
                }
            );
        }

    }); 

</script>

当写console.info(pl.data);数据如下

<?xml version="1.0" encoding="utf-8"?>
<ArrayOfCustomers xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"           xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://tempuri.org/">
  <Customers>
    <CustomerId>1</CustomerId>
    <CustomerName>Hamid</CustomerName>
    <CustomerAddress>Dhaka</CustomerAddress>
  </Customers>
  <Customers>
     <CustomerId>2</CustomerId>
     <CustomerName>Milon</CustomerName>
     <CustomerAddress>Dhaka</CustomerAddress>
  </Customers>
 <Customers>
      <CustomerId>3</CustomerId>
      <CustomerName>Jakir</CustomerName>
      <CustomerAddress>Dhaka</CustomerAddress>
 </Customers>
  <Customers>
     <CustomerId>4</CustomerId>
     <CustomerName>Hamid</CustomerName>
     <CustomerAddress>Khulna</CustomerAddress>
  </Customers>
  </ArrayOfCustomers>

Answer 1

Live Demo 给你。

我想推荐 angular-xml 处理 <xml> 角度的响应。

更多细节在angular-xml 和依赖x2js。

1. 将x2js 和angular-xml 包含到您的项目中。

2. 将xml 模块注入您的应用程序并配置httpProvider。

HTTP 拦截器会将您的所有 XML 响应转换为 JavaScript 对象。

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

app.config(function($httpProvider) {
  $httpProvider.interceptors.push('xmlHttpInterceptor');
});

1. 请注意您的响应数据结构。

通过console.info(pl)，检查从xml解析出来的result对象的嵌套结构

function loadData() {
    var promiseGet = studentService.getAllCustomers();
    promiseGet.then(
      function(pl) {
        console.info(pl);
        $scope.Customers = pl.data.ArrayOfCustomers.Customers;
      },
      function(errorPl) {
        $log.error('Some Error in Getting Records.', errorPl);
      }
    );
  }