Question

我有一个使用ng-repeat的Angular项目，它在编码到控制器中的临时JSON字符串一直正常工作：

function DocsController($scope, $http){
    $scope.applicationData = [
    {"Item":"1", Value: "Red"}, {"Item":"2", Value: "Orange}
    ];
}

但出于某种原因，当我将JSON移动到文件中并通过$ http.GET将其拉入时，ng-repeat停止工作。没有循环，没有 - 即使我可以从循环外的对象获取applicationData.length和其他属性：

$http.get('jsonData/docs.json').success(function(data) {
    alert (data);
    $scope.applicationData = data;
  });

在上面的示例中，警报显示了JSON字符串，因此我知道它已正确加载。我可以调用{{applicationData.length}}并且它将呈现2.所以我知道数据在那里，只是当通过$ http.get获取数据时，ng-repeat停止循环。

有什么想法吗？非常感谢！

项目模板（请注意，{{applicationData.length}}行正确呈现 - 所以我知道数据在那里。）

              <div class="row-fluid">
                <div class="box span12" ng-controller="DocsController">
                    <div class="box-header">
                        <h2><i class="halflings-icon list-alt"></i><span class="break"></span><strong>Application Documents</strong></h2>
                        <div class="box-icon">
                            <span><input type="checkbox" id="completedApplicationCheckbox" ng-model="trueApplication" value="option1" checked>Show Completed </span>
                            <a href="#" class="btn-minimize"><i class="halflings-icon chevron-up"></i></a>
                        </div>
                    </div>
                    </br>
                    <table class="table table-striped table-bordered bootstrap-datatable datatable">
                      <thead>
                          <tr>
                              <th>Document Title <i class="halflings-icon chevron-down"></i></th>
                              <th>Date <i class="halflings-icon chevron-down"></i></th>
                              <th>Owner <i class="halflings-icon chevron-down"></i></th>
                              <th>Status <i class="halflings-icon chevron-down"></i></th>
                              <th>Actions <i class="halflings-icon chevron-down"></i></th>
                          </tr>
                      </thead>   
                      <tbody>
                            <h2>{{applicationData.length}}</h2>
                                <tr ng-repeat="item in applicationData" class="application-{{item.status}}">
                                    <td><i class="halflings-icon file"></i> {{item.name}}</td>
                                    <td class="center">{{item.lastModified | date:'short'}}</td>
                                    <td><i class="halflings-icon {{getIconType(item.owner)}}"></i> {{item.owner}}</td>
                                    <td class="center" ng-bind-html-unsafe="createStatus(item.status)">
                                    </td>
                                    <td class="center" ng-bind-html-unsafe="createActionButton(item.status)">
                                    </td>
                                </tr>
                      </tbody>
                    </table>
                </div>
            </div>

Answer 1

- 编辑 -

尝试使用.then()

$http.get('jsonData/docs.json').then(function(data){
   $scope.applicationData = data
});

试试这个：

$scope.applicationData = [];

$http.get('jsonData/docs.json').success(function(data) {
    $scope.applicationData.push(data);
});

Answer 2

我意识到与数据表jquery插件（http://www.datatables.net/）存在冲突。我担心它不适用于Angular，因为它是一个很好的软件，但我现在必须禁用它。

为什么ng-repeat无法使用$ http.get JSON循环，但在硬编码时可以正常工作？

2 个答案: