Question

我正在使用ASP .Net MVC学习angularjs框架。这些代码失败，不加载也不绑定任何json数据。请问，哪一个不正确？

控制器：

public JsonResult GetCustomers()
{
    Customer[] customers = new Customer[]
    {
        new Customer { Age = 52, Comments = "Hello World", Id = 1, Name = "Andrew Max" },
        new Customer { Age = 12, Comments = "Hello World", Id = 2, Name = "Michael Hearve" },
        new Customer { Age = 54, Comments = "Hello World", Id = 3, Name = "Best Regards" },
        new Customer { Age = 33, Comments = "Hello World", Id = 4, Name = "Andrea Lucy" },
        new Customer { Age = 46, Comments = "Hello World", Id = 5, Name = "Silvia Reagen Estongard" },
        new Customer { Age = 23, Comments = "Hello World", Id = 6, Name = "James Hall" },
        new Customer { Age = 43, Comments = "Hello World", Id = 7, Name = "Pak Marsudi" },
        new Customer { Age = 22, Comments = "Hello World", Id = 8, Name = "Gilbert Silalahi" },
        new Customer { Age = 52, Comments = "Hello World", Id = 9, Name = "Noni Cukong" },
    };
    return Json(customers, JsonRequestBehavior.AllowGet);
}

HTML：

<div ng-app="app" ng-controller="angularController">
    <table>
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Age</th>
                <th>Comments</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in items">
                <td>{{item.Id}}</td>
                <td>{{item.Name}}</td>
                <td>{{item.Age}}</td>
                <td>{{item.Comments}}</td>
            </tr>
        </tbody>
    </table>
</div>

使用Javascript：

$(document).ready(function () {
    test();
});

function test() {
    angular
        .module('app', [])
        .controller('angularController', function ($scope, $http) {
            $http.get("/Home/GetCustomers/")
                .success(function (data) {
                    $scope.items = data;
                });
        });
};

它不会加载数据并且不会显示任何错误。这是浏览器上显示的结果

{{item.Name}} {{item.Age}} {{item.Comments}}

Answer 1

当你使用ng-app指令时，你应该从$(document).ready(function () {加载角度模块它应该直接加载它将解决你的问题

<强>的Javascript

angular
    .module('app', [])
    .controller('angularController', function ($scope, $http) {
        $http.get("/Home/GetCustomers/")
            .success(function (data) {
                $scope.items = data;
            });
    });

Working DotNetFiddle这里

Angularjs无法在ASP .Net MVC中加载数据

1 个答案: