在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鏈接

回答

相關問題