Question

在探索来自{{3}}的角度网格时，我遇到了一个不重要的功能，例如在单元格内部使用操作按钮并使用templateUrl而不是内联HTML模板处理点击。

用例很简单：有一些网格包含一些数据。我希望每行包含一个具有可用操作的单元格（编辑，删除等）。

HTML：

<div ng-if="surveysGirdOptions" ag-grid="surveysGirdOptions" class="ag-fresh" style="height :400px">
</div>

AngularJS控制器：

var columnDefs = [
    {headerName: "Caption", field: "caption", editable: true},
    {headerName: "Questions", field: "questions"},
    //{headerName: "Actions", templateUrl: "views/surveys/surveyActions.html"}
    {headerName: "Actions", cellRenderer: ageCellRendererFunc}
];

function ageCellRendererFunc(params) {
    return '<span><a class="btn btn-sm btn-primary" ng-click="delete($index)"><span class="glyphicon glyphicon-pencil"></span></a></span><span><a class="btn btn-sm btn-primary" ng-click="delete(' + params.rowIndex + ')"><span class="glyphicon glyphicon-trash"></span></a></span>';
}

ageCellRendererFunc函数的行为与预期的一样，尽管控制器中有很多模板代码可以重构并放入html文件中。

但我不知道如何在模板文件中访问params.rowIndex（此单元格的行索引）。可以通过数据变量访问行的数据，但我需要行索引。

知道它是否可行？如果可行那么如何？

有一些解决方法可以达到相同的效果。但是迭代一个大数组以找出应该编辑哪一行，例如，基于来自数据的一些id与通过索引直接访问row元素相比效率低。

Answer 1

看起来该行是作为一个整体呈现的，所以它可能正在使用类似于ngRepeat的东西来执行此操作。一种方法是创建一个指令并附加你需要的函数，它将为你提供元素，从那里你应该能够得到你想要的那一行。

我使用以下内容作为参考：http://angulargrid.com/angular-grid-angular-compiling/index.php

*更新*

您可以随时随地创建指令！我倾向于将指令从控制器中抽象出来，因为它使事情保持整洁。从文档中可以看出，指令附在此处：

function countryCellRendererFunc(params) {
    return '<country name="'+params.value+'"></country>';
}

您可以像这样创建独立指令：

var yourModule = angular.module("yourModule");

yourModule.directive('cellRender', function(){
    // Whatever you need to do here:
    return {
        restrict: 'AE',
        link: function(scope, elem, attr, ctrl){
            // Attach events here...
        }
    }       
});

//
// Inject your module into your app...
var module = angular.module("example", ["angularGrid", "yourModule"]);

module.controller("exampleCtrl", function($scope, $http) {

    function countryCellRendererFunc(params) {
        return '<cell-render name="'+params.value+'"></cell-render>';
    }

});

角网格cellRenderer可以某种方式使用templateUrl并将参数传递给它吗？

1 个答案: