在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"一词)，它就可以正常工作.底部的表格显示了传入第二个函数返回"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(){}']
最后一个是您的情况，但是对我来说，结果字符串似乎无法评估(使用有角度的$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方法不兼容.
我建议您使用自定义单元格模板，但仍然不能在角表达式(带有大括号{{...}}的表达式中使用嵌套函数)，但可以访问更多变量，例如:
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.entity可访问实体值.
- col:具有自定义模板的单元格的列，col.colDef允许访问列定义
您可以在此处看到更多，并且我编辑了您的监听器以使用它， 此处.
这篇关于在ui-grid中，我想对colDef的field属性使用一个函数.如何将另一个函数作为参数传递给它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
