1

顧客のリストを返す単純な ASP.NET WEBApi を作成し、UI にバインドしようとしています。

私のWEB Apiコントローラーの下を見つけてください：

    public class DummyController : ApiController
    {
        public HttpResponseMessage Get()
        {
            List<Customer> customers = new List<Customer>();
            Customer customer = new Customer();
            customer.FirstName = "John";
            customer.LastName = "Doe";
            customers.Add(customer);
            customer = new Customer();
            customer.FirstName = "Mike";
            customer.LastName = "Doobey";
            customers.Add(customer);

            HttpResponseMessage result = null;
            result = Request.CreateResponse(HttpStatusCode.OK, customers);
            return result;
        }
    }

角度コントローラー:

<script type="text/javascript">
    function dummyCtrl($scope) {
        $.getJSON("http://127.0.0.1:81/Api/dummy", function (resp) {
            $scope.dummy = resp;
            $scope.json = angular.toJson(resp);
            console.log($scope.json);
        });
    }
</script>

Angular コントローラーの実行:

<body ng-controller="dummyCtrl">
    <div>
        <ul>
    <li ng-repeat = "person in dummy">
        <span>{{person.FirstName}}</span>
        <span>{{person.lastname}}</span>
    </li>
        </ul>
    </div>
</body>

Chrome Dev Tools で JSON データを表示できますが、ブラウザで出力を表示できません。

[{"FirstName":"John","LastName":"Doe"},{"FirstName":"Mike","LastName":"Doobey"}] :81/:24
[{"FirstName":"John","LastName":"Doe"},{"FirstName":"Mike","LastName":"Doobey"}] :81/:24

私は何を間違っていますか？

4

1 に答える 1

4

$digest を自動的に実行する XmlHTTPRequest の周りに angularJS 独自のラッパーを使用する必要があります。したがって、コードを次のように変更します。

function dummyCtrl($scope, $http) {
    $http.get("http://127.0.0.1:81/Api/dummy").then( function (resp) {
        $scope.dummy = resp.data;
        $scope.json = angular.toJson(resp.data);
        console.log($scope.json);
    });
}

詳細については、こちらを参照してください: Angular $http リファレンス

于 2012-10-12T06:37:05.633 に答える