0

http://angulargrid.comから角度グリッドを調べているときに、セル内にアクション ボタンを配置したり、インライン HTML テンプレートではなく templateUrl を使用してクリックを処理したりするなど、重要でない機能に行き詰まりました。

使用例は簡単です: いくつかのデータを持つグリッドがあります。各行には、使用可能なアクション (編集、削除など) を含む 1 つのセルが含まれている必要があります。

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しかし、テンプレート ファイルで (このセルの行インデックス) にアクセスする方法がわかりません。行のデータは data 変数を介してアクセスできますが、行インデックスが必要です。

それがまったく実現可能かどうか、考えはありますか？そして、可能であれば、どのように？

同じ結果を達成するための回避策があります。しかし、たとえば、データからの ID に基づいて、どの行を編集する必要があるかを見つけるために大きな配列を反復処理することは、そのインデックスによって行要素に直接アクセスする場合に比べて非効率的です。

4

1 に答える 1

1

行全体がレンダリングされているように見えるため、これを行うために ngRepeat に似たものを使用している可能性があります。それを回避する1つの方法は、ディレクティブを作成し、必要な関数を内部にアタッチして要素を提供することです。そこから、目的の行を取得できるはずです。

以下を参考にしました: 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 に答える