Angular 应用程序数据绑定无法显示数据答案

【问题标题】：Angular Application Data Binding Failed to Display the DataAngular 应用程序数据绑定无法显示数据
【发布时间】：2017-12-12 01:35:24
【问题描述】：

我正在尝试根据 Account Holder Last Name 显示 Account 记录。此帐户持有人姓氏来自输入文本归档。这是通过 wcf 服务检索用户帐户信息的 Get 操作。但是当我输入帐户持有人的姓氏并单击提交按钮时出现问题，它没有显示任何内容。我调试应用程序并收到错误消息 lost host undefined 。

这是 Angular JS 代码。

@{
    Layout = null;
}

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $http, $window) {
            $scope.IsVisible = false;
            $scope.Search = function () {
                var post = $http({
                    method: "GET",
                    url: "http://localhost:52098/HalifaxIISService.svc/GetCustomers/" + encodeURIComponent($scope.Account_Holder_Last_Name),
                    dataType: 'json',
                    headers: {
                        'Accept': 'application/json, text/javascript, */*; q=0.01',
                        'Content-Type': 'application/json; charset=utf-8'
                    }
                });

                post.success(function (data, status) {
                    $scope.Customers = eval(data.d);
                    $scope.IsVisible = true;
                },
                    function (err) {
                        console.log("Some Error Occured." + err);
                    }
                );

                post.error(function (data, status) {
                    $window.alert(data.Message);
                });
            }
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        Name:
        <input type="text" ng-model="Account_Holder_Last_Name" />
        <input type="button" value="Submit" ng-click="Search()" />
        <hr />
        <table cellpadding="0" cellspacing="0" ng-show="IsVisible">
            <tr style="height: 30px; background-color: skyblue; color: maroon;">
                <th> Tittle</th>
                <th>First Name</th>
                <th> Last Name</th>
                <th>  DOB </th>
                <th> House No</th>
                <th> Street Name</th>
                <th>Post Code</th>
                <th> Occupation</th>
                <th>Account Number</th>


            </tr>
            <tbody ng-repeat="m in Customers">
                <tr>
                    <td>{{m.Tittle}}</td>
                    <td>{{m.Account_Holder_First_Name}}</td>
                    <td>{{m.Account_Holder_Last_Name}}</td>

                    <td>{{m.Account_Holder_DOB}}</td>
                    <td>{{m.Account_Holder_House_No}}</td>
                    <td>{{m.Account_Holder_Street_Name}}</td>
                    <td>{{m.Account_Holder_Post_Code}}</td>

                    <td>{{m.Account_Holder_Occupation}}</td>
                    <td>{{m.Account_Number}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

【问题讨论】：

标签： c# angular rest wcf

【解决方案1】：

问题解决了，我得改一下这行代码。

$scope.Search = function () {
          var post = $http({
              method: "GET",
              url: "http://localhost:52098/HalifaxIISService.svc/GetCustomers/" + encodeURIComponent($scope.Account_Holder_Last_Name),
              dataType: 'json',
              headers: {
                  'Accept': 'application/json, text/javascript, */*; q=0.01',
                  'Content-Type': 'application/json; charset=utf-8'
              }
          });

          post.then(function (response) { // .success(function(data => .then(function(response
              var data = response.data; // extract data from resposne
              $scope.Customers = JSON.parse(data); // eval(data.d) => JSON.parse(data)
              $scope.IsVisible = true;
          }, function (err) {
              $window.alert(err);
          });
}

【讨论】：