javascript - Angular Ui 网格 Coloumndefs 错误

标签 javascript angularjs ng-grid angular-ui-grid

当我使用以下代码时,效果很好

     <!doctype html>
     <html ng-app="app">
 <head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="ht tp://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
 </head>
 <body>

 <div ng-controller="MainCtrl">
  <br>
  <br>
  <div id="grid1" ui-grid="gridOptions" class="grid"></div>
  </div>
  <style type="text/css">
         .grid {
   width: 500px;
    height: 200px;
    }
  .red { color: red;  background-color: yellow !important; }
   .blue { color: blue;  }

    </style>

  <script>   
 var app = angular.module('app', ['ui.grid']);
      app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http)     {

        $scope.gridOptions = {
            enableSorting: true,
            columnDefs: [
          { field: 'name', cellClass: 'red' },
          { field: 'company',
              cellClass: function (grid, row, col, rowRenderIndex, colRenderIndex) {
                  if (grid.getCellValue(row, col) === 'Velity') {
                      return 'blue';
                  }
              }
          }
        ];
        };
        $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
        .success(function (data) {
            $scope.gridOptions.data = data;
        });
    } ]);


   </script>
 </body>
</html>

当我使用 Columndefs 作为变量时,这不起作用? 这是 Angular 用户界面网格中的错误

    <!doctype html>
    <html ng-app="app">
    <head>
    <script    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js">   </script>
   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"> </script>
   <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
 <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
 <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
 <script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
 <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
  <link rel="stylesheet" href="main.css" type="text/css">
 </head>
  <body>

  <div ng-controller="MainCtrl">
 <br>
 <br>
 <div id="grid1" ui-grid="gridOptions" class="grid"></div>
 </div>
  <style type="text/css">
      .grid {
  width: 500px;
  height: 200px;
  }
 .red { color: red;  background-color: yellow !important; }
 .blue { color: blue;  }

  </style>

<script>        var app = angular.module('app', ['ui.grid']);
      app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http)    {
          $scope.cv = [
          { field: 'name', cellClass: 'red' },
          { field: 'company',
                cellClass: function (grid, row, col, rowRenderIndex, colRenderIndex) {
                  if (grid.getCellValue(row, col) === 'Velity') {
                      return 'blue';
                  }
              }
          }
        ];
        $scope.gridOptions = {
            enableSorting: true,
            columnDefs: 'cv'
        };
        $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
        .success(function (data) {
            $scope.gridOptions.data = data;
        });
    } ]);


</script>
  </body>
  </html>

大家如果知道的话请帮帮我 我正在使用 Angular ui 网格制作动态模板,很快我就遇到了这种类型的愚蠢错误。 我认为在 Angular 网格字段中添加动态验证将是一项具有挑战性的任务,但我从未想过我会得到这种类型的错误。

最佳答案

columnDefs 选项不再接受字符串作为参数。它没有详细记录,但在升级指南中提到了:http://ui-grid.info/docs/#/tutorial/099_upgrading_from_2#updatecolumndefs

您可以分配命名或匿名数组:

$scope.myColDefs = [...];
$scope.gridOptions.columnDefs = $scope.myColDefs;

// or:

$scope.gridOptions.columnDefs = [...];

关于javascript - Angular Ui 网格 Coloumndefs 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30034226/

相关文章:

angularjs - 嵌套 - 嵌入项目 - 范围澄清?

javascript - 使用 angularjs : Input textbox gives TypeError: Cannot set property '0' of undefined 在 restful API 上通过 POST 提交网络表单

angularjs - ng-网格 : How to select the new row immediately

css - angularjs ng网格: how to change header style

javascript - 使用 react.cloneElement 渲染简单的 HTML

javascript - Webpack 4 迁移 CommonsChunkPlugin

JavascriptExecutor 不执行滚动操作

用于获取窗口大小的 Javascript,但失败时运行标准值

javascript - 返回 ion-item 的 ajax 数据循环

angularjs - 如何使用 ng-grid 实现无限滚动