0

在从http://angulargrid.com探索角度网格时，我遇到了一个不重要的功能，例如在单元格内有操作按钮并使用 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 是低效的。

4

1 回答 1

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>';
    }

});
于 2015-08-11T01:33:13.943 回答