angular-ui – 在任何ng网格中添加html链接

发布时间：2020-12-17 08:14:08 所属栏目：安全来源：网络整理

导读：我想添加到ng-grid的链接。这是我的代码供您参考 html ng-app="myApp" head lang="en" meta charset="utf-8" titleGetting Started With ngGrid Example/title link href="../../Content/ng-grid.css" rel="stylesheet" type="text/css" / script src="../.

我想添加到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,{ name: "James",{ name: "Siva",age: 35,{ name: "KK",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',{ 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的链接

更新：

已经注意到，这个答案不适用于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',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',cellTemplate: linkCellTemplate
}

或者您甚至可以将模板放在外部HTML文件中，并指向该URL：

{
  field: 'href',cellTemplate: 'linkCellTemplate.html'
}

…并且您只需要将URL作为href存储在myData中以使用此解决方案:)

Look here for an example of a cell template.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!