web-dev-qa-db-ja.com

ng-gridのいずれかにHTMLリンクを追加する

Ng-gridへのリンクを追加したい。これが参考のための私のコードです

<html ng-app="myApp">  
<head lang="en">
    <meta charset="utf-8">
    <title>Getting Started With ngGrid Example</title>  
    <link href="../../Content/ng-grid.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-ui-1.8.20.js" type="text/javascript"></script>
    <script src="../../Scripts/angular.js" type="text/javascript"></script>
    <script src="../../Scripts/ng-grid.js" type="text/javascript"></script>
    <script src="../../Scripts/main.js" type="text/javascript"></script>
    <script type="text/javascript">
        var app = angular.module('myApp', ['ngGrid']);
        app.controller('MyCtrl', function ($scope) {
            $scope.myData = [{ name: "RK.PRABAKAR", age: 25, href: "<a href='#'>Link1</a>" },
                 { name: "Yoga", age: 27, href: "<a href='#'>Link1</a>" },
                 { name: "James", age: 27, href: "<a href='#'>Link1</a>" },
                 { name: "Siva", age: 35, href: "<a href='#'>Link1</a>" },
                 { name: "KK", age: 27, href: "<a href='#'>Link1</a>"}];

            $scope.pagingOptions = {
                pageSizes: [2, 4, 6],
                pageSize: 2,
                currentPage: 1
            };

            $scope.gridOptions = {
                data: 'myData',
                enablePaging: true,
                showFooter: true,
                enableCellSelection: true,
                enableRowSelection: false,
                enablePinning: true,
                pagingOptions: $scope.pagingOptions,
                enableCellEdit: true,
                columnDefs: [{ field: 'name', displayName: 'Name', enableCellEdit: true },
                 { field: 'age', displayName: 'Age', enableCellEdit: true },
                 { field: 'href', displayName: 'Link', enableCellEdit: false }]
            };
        });
    </script>
    <style>
    .gridStyle {
border: 1px solid rgb(212,212,212);
width: 500px; 
height: 300px;
}
    </style>
</head>
<body data-ng-controller="MyCtrl">
    <div class="gridStyle" data-ng-grid="gridOptions"></div>
</body>

現在、グリッド内のhrefリンクを除いて、データグリッドは正常に機能しています。リンクはHTMLタグにレンダリングされず、通常の文字列として表示されます。 myDataからng-gridへのリンクを追加したい

angular-uing-grid
19
rk_sweetrascal

更新：

この回答は_ui-grid_では機能しないことに注意してください。回答時には_ng-grid_のみが存在していたため、これは理解できます。ただし、{{row.getProperty(col.field)}}の代わりに_{{COL_FIELD}}_を使用すると、ソリューションを_ng-grid_と_ui-grid_の両方に対して有効にすることができます。

私がこの答えを書いたころのこのような状況で_COL_FIELD_を使用したのはわかっているので、長いrow.getProperty(col.field)…で答える根拠はわかりませんが、どのような場合でも_COL_FIELD_そして、あなたは_ng-grid_と_ui-grid_でうまくいくはずです。

元の（変更なし）回答：

リンクフィールドのセルテンプレートを定義するだけです…

これはインラインで行うことができます：

_{
  field: 'href',
  displayName: 'Link',
  enableCellEdit: false,
  cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><a href="{{row.getProperty(col.field)}}">Visible text</a></div>'
}
_

または、変数を使用してこれを行うこともできます（gridOptionsを少しクリーンに保つには：

_var linkCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()">' +
                       '  <a href="{{row.getProperty(col.field)}}">Visible text</a>' +
                       '</div>';

{
  field: 'href',
  displayName: 'Link',
  enableCellEdit: false,
  cellTemplate: linkCellTemplate
}
_

または、テンプレートを外部HTMLファイルに入れ、URLをポイントすることもできます。

_{
  field: 'href',
  displayName: 'Link',
  enableCellEdit: false,
  cellTemplate: 'linkCellTemplate.html'
}
_

…そして、このソリューションを使用するには、URLをhrefとしてmyDataに保存するだけです:)

セルテンプレートの例については、こちらをご覧ください。

36
Kabb5

Kabb5の答えは正しいですが、ui-gridの新しいバージョンでは機能しないようです。ただし、cellTemplateに関するすべてが有効です。

row.getProperty(col.field)

あなたがする必要があります：

COL_FIELD

これが私がこれを機能させる唯一の方法でした。

2
Levi Rosol

正しい。

リーバイスの{{COL_FIELD}} で動作します angular-ui-grid 3.0.0-rc.20。

$scope.gridOptions.columnDefs = [
            { name: 'firstname' },
            { name: 'lastname'},
            { name: 'email', displayName: 'Email', allowCellFocus : false },
            {
              field: 'viewUrl',
              displayName: 'View',
              enableCellEdit: false,
              cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><a ng-href="{{COL_FIELD}}" class="glyphicon glyphicon-eye-open green"></a></div>'
            },
            {
              field: 'editUrl',
              displayName: 'Edit',
              enableCellEdit: false,
              cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><a ng-href="{{COL_FIELD}}" class="glyphicon glyphicon-pencil blue"></a></div>'
            },
            {
              field: 'id',
              displayName: 'Delete',
              enableCellEdit: false,
              cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><a ng-click="grid.appScope.deleteUser(COL_FIELD)" class="glyphicon glyphicon-remove red"></a></div>'
            }
        ];

$scope.deleteUser = function(userId) {
            alert('Delete '+userId);
          };
1
lapsoft

行のオブジェクトのプロパティを取得するには、row.entity.propertyName

1
Khasan 24-7

これは私にとってui-grid 4.0.7とangular 1.6.6で機能しました。私のプロパティはrow.entityで簡単にアクセスできます：

cellTemplate: '<div class="ngCellText">
                  <a href="Users/{{row.entity.userId}}">{{row.entity.name}}</a>
               </div>'

（わかりやすくするために改行を追加、貼り付け時に削除）

0
Ekus