Angular Ui grid Coloumndefs bug

问题

When i am using the following code, this is working fine

     <!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>

When I was using Columndefs as a variable, this is not working? Is this a bug in 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="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>

Guys if you know, then please help me I was making a dynamic templates using angular ui grid, And I got this type of silly error very soon. I was thinking that adding dynamic validation in angular grid fields would be the challenging task, but i never thought that i will get this type of error.

回答1:

The columnDefs option no longer accepts a string as an argument. It's not well-documented but it's mentioned in the upgrade guide: http://ui-grid.info/docs/#/tutorial/099_upgrading_from_2#updatecolumndefs

You can assign either a named or anonymous array:

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

// or:

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

来源：https://stackoverflow.com/questions/30034226/angular-ui-grid-coloumndefs-bug

标签

javascript

angularjs

ng-grid

angular-ui-grid