在 ui-grid 中，我想为 colDef 的 field 属性使用一个函数.如何将另一个函数作为参数传递给它? [英] In ui-grid, I want to use a function for the colDef's field property. How can I pass in another function as a parameter to it?
问题描述
在配置 Angular ui-grid 时，您需要为每个列定义指定字段.您可以使用字符串指向 row.entity 中的正确字段，也可以使用函数.请参阅此 github 问题以快速摘要:https://github.com/angular-ui/ui-grid/issues/723
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.
这是一个显示两个表格的 plunkr.顶部列出姓名和年龄，然后使用函数将第三列中的两者结合起来.只要您传入一个字符串(在这种情况下，年龄后面的单词years")，它就可以正常工作.底部的表格显示了它传入一个返回年"的辅助函数的情况.field: getNameAndAgeFunction(function(){return " years";})
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";})
在第二种情况下，getNameAndAgeFunction() 似乎永远不会执行并且单元格留空.知道如何传入函数吗?更好的是从控制器的范围内传递该函数.非常感谢！
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!
这是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'},
]
};
});
推荐答案
这是由于 gridUtil.preEval 函数准备了您放入字段属性中的字符串.
This is due to the gridUtil.preEval function wich prepares the string you put in your field attribute.
翻译:
- foo.bar 到 foo['bar']
- foo.bar(arg) 到 foo'bar'
- foo.bar(function() {...}) 到 foo['bar(function() {}']
最后一个是你的情况，但结果字符串对我来说似乎无法评估(使用 angular $parse 方法).
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() {...})
只是与 $parse 方法不兼容.
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:网格所在的范围.
- row:具有自定义模板的单元格的行，row.entity 允许访问实体值.
- col:具有自定义模板的单元格列，col.colDef 可以访问列定义
您可以在此处查看更多信息，我编辑了您的 plunker 以使用它，此处.
You can see more here and I edited your plunker to use this, here.
这篇关于在 ui-grid 中，我想为 colDef 的 field 属性使用一个函数.如何将另一个函数作为参数传递给它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
