Angular Ui 网格 Columndefs 错误

Question

当我使用以下代码时，它工作正常

     <!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 ui 网格中的错误吗

    <!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 网格字段中添加动态验证将是一项具有挑战性的任务，但我从没想过我会遇到这种类型的错误。

Answer 1

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

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

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

// or:

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

Angular Ui 网格 Columndefs 错误

Angular Ui grid Coloumndefs bug

javascript

angularjs

ng-grid

angular-ui-grid