Fatal编程技术网

Javascript AngularJs没有呈现值

javascript angularjs json asp.net-mvc

Javascript AngularJs没有呈现值,javascript,angularjs,json,asp.net-mvc,angularjs-directive,Javascript,Angularjs,Json,Asp.net Mvc,Angularjs Directive,我是AngularJS新手，需要使用AngularJS呈现我的MVC控制器Json输出。下面是我输出Json的MVC控制器： [HttpGet] public JsonResult GetAllData() { int Count = 50; return Json(Workflow.Teacher.GetTeachers(Count), JsonRequestBehavior.AllowGet); } 调用GetAllD

我是AngularJS新手，需要使用AngularJS呈现我的MVC控制器Json输出。下面是我输出Json的MVC控制器：

        [HttpGet]
    public JsonResult GetAllData()
    {
        int Count = 50;
        return Json(Workflow.Teacher.GetTeachers(Count), JsonRequestBehavior.AllowGet);
    }
调用GetAllData操作方法的我的角度控制器：

    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>
    }

@{
Layout=“~/Views/Shared/_Layout.cshtml”；
}
教师名单
加载。。。
{{message}}
{{teacherModel.TeacherNo}
{{teacherModel.TeaFName}
{{teacherModel.TeaSName}
@节JavaScript{
}
除此之外，我的主布局的主体标签上也有ng应用程序

<body ng-app="myFormApp" >
我正在使用MVC版本5和AngularJs v1.6.4。 在调试时，我可以确认它确实调用了getallData（）actionMethod，并且返回了Json格式的行。我没有得到任何错误，但它也没有渲染模型值

如有任何建议，我们将不胜感激。

使用
response.data
获取数据

改变

$scope.ListTeachers = response;
对此

$scope.ListTeachers = response.data;
使用
response.data
捕获数据

改变

$scope.ListTeachers = response;
对此

$scope.ListTeachers = response.data;
然后回调响应有几个参数，如数据、标题、状态、状态文本来检查您的请求。

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

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

$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);
    }
我希望这能有所帮助。

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

$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);
    }
我希望这有帮助。

然后它可能会失败，因为他正在重写angular正在监视的对象引用。然后它可能会失败，因为他正在重写angular正在监视的对象引用。在$scope.listChesters=response之前；查看控制台中的内容。然后分配给它。。此外，您还需要确保脚本工作正常，并在控制器内测试它{{3+4}}答案应该是7-如果不是，那么您将面临脚本冲突$scope.listChesters=response之前；查看控制台中的内容。然后分配给它。。另外，您还要确保脚本工作正常，并在控制器内测试它{{3+4}}答案应该是7-否则您将面临脚本冲突