在任何 ng-grid 中添加 html 链接答案

【问题标题】：Add html link in anyone of ng-grid在任何 ng-grid 中添加 html 链接
【发布时间】：2013-08-19 09:02:31
【问题描述】：

我想添加到 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-ui ng-grid

【解决方案1】：

更新：

已注意到此答案不适用于ui-grid。这是可以理解的，因为在回答时只有ng-grid 存在；但是，用{{COL_FIELD}} 代替{{row.getProperty(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 中即可使用此解决方案:)

Look here for an example of a cell template.

【讨论】：

我喜欢最后一张！
是的，为您的模板使用单独的 HTML 文件可以使您的 JavaScript 不那么混乱，并且您可以避免转义引号的挫败感……这也是我的首选方法。
要与升级后的 Angular UI 网格一起使用，我需要删除 div 标签。然后我的单元格模板如下所示：'可见文本'。
请记住，为每个模板使用单独的 html 文件可能会增加延迟时间，因为每个模板都是额外的请求，这会导致性能下降。我也更喜欢将模板与 javascript 分开，但不是在性能因此而降低的情况下。现在对于一个衬垫模板，我使用了一个助手。
根据您的回答“并且您只需将 URL 作为 href 存储在 myData 中即可使用此解决方案” - 您能否详细说明？我有一个 html 模板，由于某种原因，网格无法获取该模板，并试图找出谁提供模板的路径。

【解决方案2】：

Kabb5给出的答案是正确的，但似乎对于较新版本的ui-grid，它不起作用。然而，关于 cellTemplate 的一切都是有效的，而不是

row.getProperty(col.field)

你需要做的：

COL_FIELD

这是我能够让它工作的唯一方法。

【讨论】：

感谢您指出这一点...我在答案中添加了更新，提到 COL_FIELD 可用于使解决方案与 ng-grid 和 ui-grid 一起使用

【解决方案3】：

没错。

Levi 的 {{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);
          };

【讨论】：

【解决方案4】：

要连续获取对象的属性，可以使用row.entity.propertyName

【讨论】：

【解决方案5】：

这对我来说适用于 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>'

（为清楚起见添加了换行符，粘贴时删除）

【讨论】：