Ничего не показано в таблице, используя Ng-GRID

код для нг-сетки:Ничего не показано в таблице, используя Ng-GRID

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) { 

    $scope.myData=[]; 
    $scope.queryResponse =[{ 
     name: "name1", city:"city1" 
    }, { 
     name: "name2", city:"city2" 
    }, { 
     name: "name3", city:"city3" 
    }, { 
     name: "name4", city:"city4" 
    }, { 
     name: "name5", city:"city5" 
    }, { 
     name: "name6", city:"city6" 
    }, { 
     name: "name7", city:"city7" 
    } 

    ]; 

    $scope.colDefs = [{ 
     field: "name" 
    }, { 
     field: "city" 
    }]; 

    $scope.filterOptions = { 
     filterText: "" 
    }; 

    $scope.pagingOptions = { 
     pageSizes: [5, 10, 25], 
     pageSize: 5, 
     totalServerItems: 0, 
     currentPage: 1 
    }; 

    $scope.setPagingData = function(data, page, pageSize) { 
     var pagedData = data.slice((page - 1) * pageSize, page * pageSize); 
     $scope.myData = pagedData; 
     $scope.pagingOptions.totalServerItems = data.length; 
     if (!$scope.$$phase) { 
      $scope.$apply(); 
     } 
    }; 

    $scope.getPagedDataAsync = function(pageSize, page) { 
     setTimeout(function() { 
       $scope.setPagingData($scope.queryResponse, page, pageSize); 
     }, 100); 
    }; 

    $scope.$watch('pagingOptions', function() { 
     $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText); 
    }, true); 

    $scope.gridOptions = { 
     data: 'myData', 
     columnDefs: 'colDefs', 
     enablePaging: true, 
     pagingOptions: $scope.pagingOptions, 
     showFooter: true 
    }; 
});

HTML:

<div ng-app="myApp" ng-controller="myCtrl"> 
    <div class="gridStyle" ng-grid="gridOptions"></div> 
</div>

Всего пунктов: 7

отображается в нижнем колонтитуле. Но ничто из меня показанных в таблице. Любые советы ..

источник

2015-08-05 dev ツ

как о некоторых из HTML? – ethorn10

@ ethorn10 plz найти обновленный вопрос –

В чем вопрос? – lin

Вот несколько вопросов, которые могут помешать вам увидеть что-то на странице.

В вашем html используется 'ng-grid' вместо 'ui-grid' (это из link вы опубликовали). Также была синтаксическая ошибка, когда вы указали свой контроллер (myCtrl вместо MyCtrl).

В вашем JavaScript: 'ui.grid' не включен в качестве зависимости, а $ scope.colDefs выдает ошибку внутри gridOptions. Я включил рабочую версию ниже.

HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <link href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" /> 
</head> 
<body> 
    <div ng-app="myApp" ng-controller="myCtrl"> 
    <div class="gridStyle" ui-grid="gridOptions"></div> 
    </div> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script> 
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
    <script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script> 
    <script src="./app.js"></script> 
</body> 
</html>

JavaScript (app.js):

var app = angular.module('myApp', ['ui.grid']); // ui.grid included 

app.controller('myCtrl', function($scope) { 
    $scope.myData=[]; 

    var queryResponse =[ 
    {name: "name1", city:"city1"}, 
    {name: "name2", city:"city2"}, 
    {name: "name3", city:"city3"}, 
    {name: "name4", city:"city4"}, 
    {name: "name5", city:"city5"}, 
    {name: "name6", city:"city6"}, 
    {name: "name7", city:"city7"} 
    ]; 

    // This was originally $scope.colDefs 
    // error occured (angular didn't like colDefs on $scope) 
    var colDefs = [ 
    {field: "name", width: 80}, 
    {field: "city"} 
    ]; 

    // This was originally $scope 
    var filterOptions = { 
    filterText: "" 
    }; 

    $scope.pagingOptions = { 
    pageSizes: [5, 10, 25], 
    pageSize: 5, 
    totalServerItems: 0, 
    currentPage: 1 
    }; 

    var setPagingData = function(data, page, pageSize) { 
    var pagedData = data.slice((page - 1) * pageSize, page * pageSize); 
    $scope.myData = pagedData; 
    $scope.pagingOptions.totalServerItems = data.length; 
    if (!$scope.$$phase) { 
     $scope.$apply(); 
    } 
    }; 

    var getPagedDataAsync = function(pageSize, page) { 
    setTimeout(function() { 
     setPagingData(queryResponse, page, pageSize); 
    }, 100); 
    }; 

    $scope.$watch('pagingOptions', function() { 
    getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage); 
    }, true); 

    $scope.gridOptions = { 
    data: 'myData', 
    columnDefs: colDefs, 
    enablePaging: true, 
    filterOptions: filterOptions, 
    pagingOptions: 'pagingOptions', 
    showFooter: true 
    }; 
});

источник

2015-08-06 08:13:38 dannypaz

спасибо за ваш ответ, но не могу ли я добиться этого с помощью ng-grid? –

Я не нашел примеров, которые использовали ng-grid в качестве директивы. Также см .: http://ui-grid.info/docs/#/tutorial/101_intro – dannypaz

Ничего не показано в таблице, используя Ng-GRID

ответ

Смежные вопросы