Question

我是AngularJS的新手，需要使用AngularJs来渲染我的MVC控制器Json输出。下面是我输出Json的MVC控制器：

        [HttpGet]
    public JsonResult GetAllData()
    {
        int Count = 50;
        return Json(Workflow.Teacher.GetTeachers(Count), JsonRequestBehavior.AllowGet);
    }

My Angular Controller调用GetAllData Action方法：

    angular.module('myFormApp', [])
.controller('HomeController', function ($scope, $http, $location, $window) {
    $scope.teacherModel = {};
    $scope.message = '';
    $scope.result = "color-default";
    $scope.isViewLoading = false;
    $scope.ListTeachers = null;
    getallData();

//******=========Get All Teachers=========******  
    function getallData() {
        $http({
            method: 'GET',
            url: '/Home/GetAllData'
        }).then(function successCallback(response) {
            // this callback will be called asynchronously
            // when the response is available
            $scope.ListTeachers = response;
            console.log($scope.ListTeachers);
        }, function errorCallback(response) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
            $scope.errors = [];
            $scope.message = 'Unexpected Error while saving data!!';
            console.log($scope.message);
        });
    };

})
.config(function ($locationProvider) {
    $locationProvider.html5Mode(true);
});

此外，我的MVC布局标记如下：

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Teachers List</h2>

<div id="content" ng-controller="HomeController">
    <span ng-show="isViewLoading" class="viewLoading">
        <img src="~/Content/images/ng-loader.gif" /> loading...
    </span>
    <div ng-class="result">{{message}}</div>

    <table class="table table-striped">
        <tr ng-repeat="teacherModel in ListTeachers">
            <td>{{teacherModel.TeacherNo}}</td>
            <td>{{teacherModel.TeaFName}}</td>
            <td>{{teacherModel.TeaSName}}</td>
        </tr>
    </table>

</div>

    @section JavaScript{
        <script src="~/Scripts/angular.js"></script>
        <script src="~/ScriptsNg/HomeController.js"></script>
    }

进一步上面我的主要布局的body标签也有ng-app

<body ng-app="myFormApp" >

我正在使用AngularJs v1.6.4的MVC第5版。在调试时我可以确认它确实调用了getallData（）actionMethod并确实在Json中返回行。我没有收到任何错误，但它也没有渲染模型值。

任何建议都将不胜感激。

Answer 1

使用response.data来捕获数据。

更改

$scope.ListTeachers = response;

到这个

$scope.ListTeachers = response.data;

Answer 2

此代码存在许多问题。首先，通过分配

$scope.ListTeachers = null;

稍后使用此变量会让您变得更加复杂。如果您希望REST接口返回一个数组，那么可以将初始赋值作为空数组。

$scope.ListTeachers = [];

这很重要，因为当您获得新结果时不应覆盖此对象。 Angular将自己的魔法添加到它所绑定的对象上，并通过覆盖一个对象来消灭这种魔法。

如何更新数据是这样的：

then(function successCallback(response) {
        // this callback will be called asynchronously
        // when the response is available
        $scope.ListTeachers.length = 0;

        if( response && response.data){
            response.data.forEach(function callback(currentValue) 
                {
                    $scope.ListTeachers.push(currentValue);
                });
         }
        console.log($scope.ListTeachers);
    }

我希望这会有所帮助。

Answer 3

然后回调响应有几个参数，如数据，标题，状态，状态文本，以检查您的请求。

AngularJs没有渲染价值

3 个答案: