Question

我有以下情况：

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开发工具时，这里的重复应该是：

enter image description here

这让我觉得有些不对劲，但我不能老老实实。

修改

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

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();
    });

console.log($scope.data[0].ID)打印'123'。我不明白这一点，我认为这是JSON格式，因为我把它解析为JSON，但是当我尝试在HTML上打印它时，它就不会被打印出来。

Answer 1

问题：

这可能是因为你使用jQuery而不是Angular加载数据。由于数据是异步加载的，因此Angular不知道它们在那里，所以它不会更新视图。

解决方案：

尽可能使用Angular方法，因此Angular会自动知道发生了什么在您的情况下，$http服务和Angular的fromJson()方法（angular.fromJson(...)）应该可以胜任。
如果必须使用非Angular方法，则需要明确告知Angular它需要重新检查，手动触发$ digesr循环：

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

......或者更好：

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

ng-repeat不打印任何东西

修改

1 个答案:

问题：

解决方案：