Ajouter un lien html dans quelqu'un de ng-grille
Je veux ajouter un lien vers ng-grille.
Voici mon code pour votre référence
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Getting Started With ngGrid Example</title>
<link href="../../Content/ng-grid.css" 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>
Droit maintenant de grille de données fonctionne bien sauf href lien dans la grille.
Le lien n'est pas rendu à la balise html est affiché comme normal de la chaîne.
Je veux ajouter un lien vers ng-grille de myData
Vous devez vous connecter pour publier un commentaire.
Mise à jour:
Il a été noté que cette réponse ne fonctionne pas avec
ui-grid
. Cela est compréhensible, car à l'époque de la réponse seulementng-grid
existé; cependant, la substitution{{COL_FIELD}}
en place de{{row.getProperty(col.field)}}
permet à la solution d'être valable pour les deuxng-grid
etui-grid
.Je sais que j'ai utilisé
COL_FIELD
dans ces situations à travers le temps, j'ai écrit cette réponse, donc je ne suis pas sûr de mon raisonnement pour répondre avec la plusrow.getProperty(col.field)
...mais dans tous les cas, l'utilisationCOL_FIELD
et vous devriez être bon d'aller avecng-grid
etui-grid
.Original (inchangé) Réponse:
Vous avez juste besoin de définir une cellule de modèle pour le champ de Lien...
Vous pouvez le faire en ligne:
Ou vous pouvez le faire en utilisant une variable (pour garder vos gridOptions un peu plus propre:
Ou vous pouvez même mettre votre modèle dans un fichier HTML externe et le point à l'URL:
...et vous avez seulement besoin de stocker l'URL comme
href
dansmyData
de travailler avec cette solution 🙂Voir ici pour un exemple d'une cellule de modèle.
$scope.myData
peut inclurehref: "http://www.google.com"
plutôt quehref: "<a href='http://www.google.com'>Google</a>"
La réponse que Kabb5 donné est correct, mais il semble que, pour les nouvelles versions de l'interface utilisateur-réseau, il ne fonctionne pas. Tout ce qui concerne les cellTemplate est valide, cependant, au lieu de
Que vous devez faire:
C'était la seule façon que j'ai été en mesure d'obtenir que cela fonctionne.
Droit.
Levi's
{{COL_FIELD}}
fonctionne avecangular-ui-grid 3.0.0-rc.20
.Pour obtenir la propriété de l'objet dans une ligne, on peut simplement utiliser
row.entity.propertyName
Cela a fonctionné pour moi avec de l'interface utilisateur-réseau 4.0.7 et angulaire 1.6.6, mes propriétés sont facilement accessibles en ligne.entité:
(ajouté des sauts de ligne pour plus de clarté, supprimer lors du collage)