Angular Ui 网格 Coloumndefs 错误 - IT屋-程序员软件开发技术分享社区
首页 前端开发 Angular Ui 网格 Coloumndefs 错误
Angular Ui 网格 Coloumndefs 错误
[英] Angular Ui grid Coloumndefs bug
本文介绍了Angular Ui 网格 Coloumndefs 错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我使用以下代码时，这工作正常
<html ng-app="app"><头><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"><身体><div ng-controller="MainCtrl"><br><br><div id="grid1" ui-grid="gridOptions" class="grid"></div> <style type="text/css">.网格 {宽度:500px；高度:200px；}.red { 颜色:红色；背景颜色:黄色！重要；}.blue { 颜色:蓝色；}</风格><脚本>var app = angular.module('app', ['ui.grid']);app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {$scope.gridOptions = {启用排序:真，列定义:[{ field: 'name', cellClass: 'red' },{ 字段:'公司'，cellClass: 函数 (grid, row, col, rowRenderIndex, colRenderIndex) {if (grid.getCellValue(row, col) === 'Velity') {返回蓝色"；}}}];};$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json').成功(功能(数据){$scope.gridOptions.data = 数据；});}]);
</html>当我使用 Columndefs 作为变量时，这不起作用? 这是角度 ui 网格中的错误吗
<html ng-app="app"><头><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 src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"><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"><身体><div ng-controller="MainCtrl"><br><br><div id="grid1" ui-grid="gridOptions" class="grid"></div><style type="text/css">.网格 {宽度:500px；高度:200px；}.red { 颜色:红色；背景颜色:黄色！重要；}.blue { 颜色:蓝色；}</风格><脚本>var app = angular.module('app', ['ui.grid']);app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {$scope.cv = [{ field: 'name', cellClass: 'red' },{ 字段:'公司'，cellClass: 函数 (grid, row, col, rowRenderIndex, colRenderIndex) {if (grid.getCellValue(row, col) === 'Velity') {返回蓝色"；}}}];$scope.gridOptions = {启用排序:真，columnDefs: '简历'};$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json').成功(功能(数据){$scope.gridOptions.data = 数据；});}]);</html>
如果你知道，请帮帮我 我正在使用 angular ui grid 制作动态模板，我很快就遇到了这种愚蠢的错误.我以为在角度网格字段中添加动态验证将是一项具有挑战性的任务，但我从没想过我会遇到这种类型的错误.
解决方案
columnDefs 选项不再接受字符串作为参数.它没有详细记录，但在升级指南中提到:http://ui-grid.info/docs/#/tutorial/099_upgrading_from_2#updatecolumndefs
您可以分配命名或匿名数组:
$scope.myColDefs = [...];$scope.gridOptions.columnDefs = $scope.myColDefs;//或者:$scope.gridOptions.columnDefs = [...];
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.
解决方案
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 = [...];
这篇关于Angular Ui 网格 Coloumndefs 错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
