问题
When configuring an Angular ui-grid, you specify the field for each column definition. You can either use a string to point to the right field in the row.entity, or you can use a function. See this github issue for a quick summary of how: https://github.com/angular-ui/ui-grid/issues/723
When specifying the field using a function, I can pass in strings, objects, and arrays as arguments. For some reason, though, it doesn't work when I pass another function. In fact, the primary function to define the field doesn't even seem to execute at all.
Here is a plunkr that shows two tables. The top one lists names and ages, then combines the two in the third column using a function. It works fine as long as you pass in a string (in this case the word " years" after the age). The bottom table shows the case where it's passing in a secondary function that returns " years". field: getNameAndAgeFunction(function(){return " years";})
In the second case, getNameAndAgeFunction() never seems to execute and the cell is left empty. Any idea of how I can pass a function in? Even better would be to pass that function in from the controller's scope. Many thanks!
Here is the JS:
var app = angular.module('myApp', ['ui.grid']);
app.controller('MyCtrl', function($scope) {
$scope.myData = [
{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34 }];
angular.forEach($scope.myData,function(row){
row.getNameAndAgeString = function(units){
return this.name + '-' + this.age + units;
}
});
angular.forEach($scope.myData,function(row){
row.getNameAndAgeFunction = function(fx){
return this.name + '-' + this.age + fx();
}
});
$scope.getUnits = function(){return " years"};
$scope.gridOptionsString = {
data: 'myData',
columnDefs: [{field: 'name', displayName: 'Name'},
{field:'age', displayName:'Age'},
{field: 'getNameAndAgeString(" years")', displayName: 'Name and age'},
]
};
$scope.gridOptionsFunction = {
data: 'myData',
columnDefs: [{field: 'name', displayName: 'Name'},
{field:'age', displayName:'Age'},
{field: 'getNameAndAgeFunction(function(){return " years";})', displayName: 'Name and age'},
]
};
});
回答1:
This is due to the gridUtil.preEval
function wich prepares the string you put in your field attribute.
It tranlsates:
- foo.bar to foo['bar']
- foo.bar(arg) to foo'bar'
- foo.bar(function() {...}) to foo['bar(function() {}']
The last one is your case, but the resulting string seems not evaluable to me (using angular $parse
method).
I was looking throug it and it looks like a string like the last one:
foo.bar(function() {...})
is just not compatible with $parse
method.
I'd suggest you to go with a custom cell template, you still would not be able to use nested function inside an angular expression (the ones with the curly brackets {{ ... }}) but you would have access to more variables like:
- grid.appScope: the scope wherein the grid resides.
- row: the row of the cell with custom template, row.entity gives access to entity values.
- col: the column of the cell with custom template, col.colDef gives access to column definition
You can see more here and I edited your plunker to use this, here.
回答2:
So, I was looking at the plunkr in the post linked from the OP and a couple script links were broken, so here's a direct link with those fixed: http://plnkr.co/edit/jAyqrKZ6gGa4Xrp7NRsq?p=preview
I'll say I like that it works, using the function string in the field property. I don't like however that I have to add that function to each row of data, especially if there are 1000's of rows.
angular.forEach($scope.myData,function(row){
row.getNameAndAge = function(){
return this.name + '-' + this.age;
}
});
I haven't found how to do this with an anonymous function, but that would look cleaner to me.
来源:https://stackoverflow.com/questions/33399291/in-ui-grid-i-want-to-use-a-function-for-the-coldefs-field-property-how-can-i