Angular-使用$http加载json数据时的网格

Question

我正在项目中使用 ag-grid 插件。我使用 $http 服务获取 json 数据。但是网格在网页中显示为空白。但是当直接应用 json 数据时，网格工作。我认为这可能是由于从 $http 获取数据的延迟所致。但是根据 angular 的概念，网格应该在数据到来时更新。有什么解决办法只在数据来自服务器时才显示html页面吗？

下面是我的 javascript 文件 'fileBrowser.js':

var fileBrowserModule = angular.module('fileBrowser', ['agGrid']);

fileBrowserModule.controller('fileBrowserController', function($scope, $http) {

    $scope.rowData=[
                ];

    $http.get("http://localhost:8080/KKR/flow/sin/allSins.json")
    .success(function(data) {


    $scope.rowData=JSON.parse("["+JSON.stringify(data)+"]");
        console.log($scope.rowData);
    });



 /*  
 $scope.rowData=[                
{"group":true,"data":{"name":"joe"},
    "children":[
                {"group":true,"data":{"name":"pat"},
                    "children":[{"group":true,
                        "data":{"name":"maya"},
                        "children":[{"group":false,
                            "data":{"name":"brook"},
                            "children":[]},{"group":true,
                                "data":{"name":"kery"},
                                "children":[{"group":false,
                                    "data":{"name":"santosh"},
                                    "children":[]}]}]}]},
                                    {"group":false,
                                        "data":{"name":"aravind"},"children":[]}]}
 ]
           */


    var columnDefs = [
        {headerName: "Name", field: "name", width: 250,
            cellRenderer: {
                renderer: 'group',
                innerRenderer: innerCellRenderer
            }},
        {headerName: "Size", field: "size", width: 70, cellStyle: sizeCellStyle},
        {headerName: "Type", field: "type", width: 150},
        {headerName: "Date Modified", field: "dateModified", width: 150}
       ];

    $scope.gridOptions = {
        columnDefs: columnDefs,
        rowData: $scope.rowData,
        rowSelection: 'multiple',
        rowsAlreadyGrouped: true,
        enableColResize: true,
        enableSorting: true,
        rowHeight: 20,
        icons: {
            groupExpanded: '<i class="fa fa-minus-square-o"/>',
            groupContracted: '<i class="fa fa-plus-square-o"/>'
        },
        onRowClicked: rowClicked
    };

    $scope.selectedFile = 'Select a file below...';



    function rowClicked(params) {
        var node = params.node;
        var path = node.data.name;
        while (node.parent) {
            node = node.parent;
            path = node.data.name + '\' + path;
        }
        $scope.selectedFile = path;
    }

    function sizeCellStyle() {
        return {'text-align': 'right'};
    }

    function innerCellRenderer(params) {
        var image;
        if (params.node.group) {
            image = params.node.level === 0 ? 'disk' : 'folder';
        } else {
            image = 'file';
        }
        var imageFullUrl = '/example-file-browser/' + image + '.png';
        return '<img src="'+imageFullUrl+'" style="padding-left: 4px;" /> ' + params.data.name;
    }

});

下面是我的 html 文件：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="styles/angular/fileBrowser.css" rel="stylesheet">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  <!--   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
  --> 
     <script src=" https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>


    <!-- you don't need ignore=notused in your code, this is just here to trick the cache -->
    <script src="scripts/angular/ag-grid.js?ignore=notused10"></script>
    <link rel="stylesheet" type="text/css" href="styles/angular/ag-grid.css?ignore=notused10">
    <link rel="stylesheet" type="text/css" href="styles/angular/theme-fresh.css?ignore=notused10">

    <script src="scripts/angular/fileBrowser.js"></script>

</head>

<body ng-app="fileBrowser">

    <div ng-controller="fileBrowserController"
         style="border: 1px solid darkgrey;
                width: 600px;
                background-color: lightgrey;
                border-radius: 5px;
                padding: 3px;">
        <div style="border: 1px solid darkgrey; margin-bottom: 2px; background-color: white;"> &nbsp; {{selectedFile}}</div>
        <div style="width: 100%; height: 400px;"
             ag-grid="gridOptions"
             class="ag-file-browser">
        </div>

    </div>

</body>
</html>

Answer 1

使用 ag-Grid API 设置行数据。

看这个例子“Further Example Starting Point”就知道了

代码是

$scope.gridOptions.api.setRows(res.data);

Answer 2

我修改了之前的答案。我们可以使用 setRowData 而不是 setRows。这对我有用：

$scope.gridOptions.api.setRowData(res.data);

Angular-使用$http加载json数据时的网格

Angular-grid when using $http to load json data

angularjs

angularjs-scope

ag-grid