ng-repeat不打印任何内容

CodeTrooper

我有以下情况：

app.controller('ResourceController', function($scope, $sce){
        var resourceData;
        $scope.data = '';
        $scope.loadResources = function(){
            $.get('controllers/getResources.php', function(result){
                console.log(result);
                resourceData = $.parseJSON(result);
                $scope.data = $sce.parseAsHtml(resourceData);
            });
        };
        $scope.loadResources();
    });

上面的控制器向服务器发出请求，以便它可以加载所有资源并将它们发布到html表上。

这是的结果console.log(result)：

[{"ID":"123","NAME":"Proyector Epson CX2435","DESCRIPTION":"Proyector Epson comprado en 2009.","STATUS":"Active","STATUS_DESCRIPTION":"Can be reserved.","LOCATION":"Elementary"},{"ID":"456","NAME":"Rack con Televisor #1","DESCRIPTION":"Televisor Sharp Aquos con Laptop, armado en 2011.","STATUS":"Active","STATUS_DESCRIPTION":"Can be reserved.","LOCATION":"First Floor, High School"}]

这是一个很大的JSON，数据在那里，很好。

在HTML中，这就是我正在做的：

<div class="container-fluid" ng-controller="ResourceController as resource">
   .....
      <tbody>
            <tr ng-repeat="resourceInfo in data">
                <td>{{resourceInfo.ID}}</td>
                <td>{{resourceInfo.NAME}}</td>
                <td>{{resourceInfo.DESCRIPTION}}</td>
                <td>{{resourceInfo.STATUS}}</td>
                <td>{{resourceInfo.STATUS_DESCRIPTION}}</td>
                <td>{{resourceInfo.LOCATION}}</td>
                <td>
                    <a class="btn btn-danger" data-toggle="modal" data-target="#delete-prompt">Delete</a>
                    <button class="btn btn-info" data-toggle="modal" data-target="#update-form">Update</button>
                </td>
            </tr>
        </tbody>

当我打开Chrome开发者工具时，这里应该是重复的地方：

在此处输入图片说明

这使我认为出了什么问题，但是我不能诚实地弄清楚是什么。

编辑

我只是将控制器更改为以下内容：

app.controller('ResourceController', function($scope, $sce){
        $scope.data = '';
        $scope.loadResources = function(){
            $.get('controllers/getResources.php', function(result){
                console.log(result);
                $scope.data = $.parseJSON(result);
                console.log($scope.data);
                console.log($scope.data[0].ID);
            });
        };
        $scope.loadResources();
    });

The console.log($scope.data[0].ID) prints '123'. I don't understand this, I thought this was in JSON format because I do parse it as JSON, but when I try to print it on the HTML, it just doesn't get printed.

gkalpak

Problem:

This probably because you load the data using jQuery and not Angular. Since the data is loaded asynchronously, Angular does not know they are there, so it doesn't updare the view.

Solutions:

Use Angular methods as much as possible, so Angular automatically knows what's going on.
In your case, the $http service and Angular's fromJson() method (angular.fromJson(...)) should do the job.
If must use non-Angular methods, you need to explicitly inform Angular that it needs to re-check, manually triggering a $digesr cycle:

$ .get（'controllers / getResources.php'，function（result）{... $ scope.data = $ .parseJSON（result）; $ scope。$ apply（）;}）;

...或更好的是：

$.get('controllers/getResources.php', function (result) {
    $scope.$apply(function () {
        ...
        $scope.data = $.parseJSON(result);
    });
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。