0

我有一个使用 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>
4

2 回答 2

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);
});
于 2013-03-20T16:23:14.370 回答
0

我意识到数据表 jquery 插件（http://www.datatables.net/）存在冲突。恐怕它不适用于 Angular，因为它是一款出色的软件，但我现在不得不禁用它。

于 2013-03-20T18:15:10.817 回答