0

コントローラーにコード化された一時的な JSON 文字列で正常に動作している ng-repeat を使用する Angular プロジェクトがあります。

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

datatable jquery プラグイン ( http://www.datatables.net/ ) との競合があることに気付きました。Angular は優れたソフトウェアであるため、残念ながら Angular では動作しませんが、今のところ無効にする必要があります。

于 2013-03-20T18:15:10.817 に答える