Question

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

显示在页脚中。但表中没有显示任何内容。任何建议..

Answer 1

以下是一些可能阻止您在网页上看到某些内容的问题。

在你的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
  };
});

使用ng-grid的表格中没有显示任何内容

1 个答案: