在ng-grid的任何人中添加html链接

我想添加到ng-grid的链接。这里是我的代码，供大家参考在ng-grid的任何人中添加html链接

<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-电网

来源

2013-08-19 rk_sweetrascal

更新：

它已经注意到，这个答案不ui-grid工作。这是可以理解的，因为在回答时只有ng-grid存在;但是，使用{{COL_FIELD}}代替{{row.getProperty(col.field)}}可以使解决方案对于ng-grid和ui-grid均有效。

我知道我在身边，我写这个答案的时候，这些情况下使用COL_FIELD，所以我不知道我的理据与较长row.getProperty(col.field)＆hellip回答;但在任何情况下，使用COL_FIELD，你应该是好去ng-grid和ui-grid。

原始（不变）答：

你只需要定义链接域＆hellip单元模板;

你可以这样做在线：

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

＆hellip;您只需要将URL小号href在myData与此解决方案工作:)

Look here for an example of a cell template.

来源

2013-08-19 16:36:16 Kabb5

我爱的最后一个！ – jmcollin92

是的，为您的模板使用单独的HTML文件可以让您的JavaScript减少混乱，并且可以避免引用转义引起的沮丧......绝对是我的首选方法。 – Kabb5

要使用升级后的角度UI网格，我需要删除div标签。我的单元格模板看起来像这样：'Visible text'。 – devinbost

是Kabb5给出的答案是正确的，但现在看来，对于UI电网的新版本，这是行不通的。关于cellTemplate一切都是有效的，但是，不是

row.getProperty(col.field)

你需要做的：

COL_FIELD

这是我能得到这个工作的唯一途径。

来源

2014-12-07 22:11:13

感谢您指出这一点...我添加了一个更新，我的答案提到可以使用COL_FIELD使解决方案同时适用于ng-grid和ui-grid – Kabb5

对。

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

来源

2015-03-10 08:25:47 lapsoft

为了获取对象的属性一排，一个可以只使用row.entity.propertyName

来源

2016-02-27 12:50:26

这与UI电网4.0.7和1.6.6的角度为我工作，我的财产都在方便row.entity：

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

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

来源

2017-12-04 14:08:45 Ekus

在ng-grid的任何人中添加html链接

回答

相关问题