7
votes

Pourquoi ne peut-être pas de lier la "case" de type d'entrée dans CellTemplate?

Voici mon exemple de plumker: strong> http://plnkr.co/edit/tc9frhaeoqloqy7sk1ae? p = aperçu

Qu'est-ce que j'essaie de faire: strong> Louchez la case à cocher HTML à partir de Field04 dans mes données sur la cellule à l'aide de CellTemplate et avez toujours accès à sa fonction NG-clic. P>

code dans l'application.js: p>

<body>

<div ng-controller="MainCtrl">
  <div ui-grid="gridOptions" external-scopes="myViewModel" class="grid"></div>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-sanitize.min.js"></script>
<script src="app.js"></script>
<script type="text/ng-template" id="viewTemplate2">
  <span ng-bind-html="row.entity[col.field]"></span>
</script>

</body>


9 commentaires

Y a-t-il une raison pour laquelle vous ne pouvez pas mettre votre HTML HTML désiré dans un chariot cellulaire dans les colonnes? Est-ce parce que le HTML que vous voulez appartenir à vos données? La façon dont vous avez atteinte pour le champ03 serait la bonne façon de le faire. Lorsque vous travaillez avec UI-Grid (qui est NG-Grid 3.0), vous souhaitez mettre votre HTML personnalisé dans une cellule de cellt.


Lorsque les données sont entrées dans, je dois le filtrer en quelque sorte. Par exemple, Field03 est "Autorisations", si "Autorisations": "CANEDIT" est vrai, j'ai besoin d'afficher une icône d'édition. En outre, l'élément de ligne peut avoir un document lié à celui-ci, dans l'affirmative, j'ai donc besoin d'afficher une icône de lien de document juste à côté de l'icône "Canedit" dans le champ 03. Dans "UI-Grid", je ne peux pas comprendre comment exécuter des scripts comme celui-ci, car les données sont chargées dans la grille. Je pourrais le faire dans JQgrid en utilisant AftraSerRow: fonction (Rowid, données) {}


Vous pouvez créer un filtre personnalisé en angulaire pour gérer cette logique. Vous pouvez ensuite appeler ce filtre pour cette colonne comme suit: {nom: 'Field04', champ: 'Field04', Cellfilter: 'myNewfilter'}


J'ai essayé d'abord l'itinéraire Cellfilter, mais cela ne gère pas HTML. Tout ce qui est retourné du filtre est lu comme "texte seulement", alors mon HTML est imprimé dans la cellule. Cellfilter ne fonctionne également pas si vous utilisez CellTemplate.


Si vous utilisez un téléphone cellulaire, vous pouvez ajouter le filtre comme celui-ci: CellTemplate: ' {{col_field | myfilter}} '. De plus, vous pouvez retourner HTML à l'aide d'un filtre. Injectez le service $ SCE dans le filtre et faites-le renvoyer le filtre ceci: retour $ sce.trustashTML (" Stuff HTML personnalisé ");


Le filtre provoque une cumulation infiniment "RéférenceErthError: $ SCE n'est pas définie". Je référencis $ SCE dans mon contrôleur de grille, suis-je censé y référoir ailleurs pour que le filtre fonctionne?


Vous devez injecter le service $ SCE dans le nouveau filtre, non dans votre contrôleur. Par exemple. app.filter ('myNewfilter', fonction ($ sce) {...


Injecter le service $ SCE dans le nouveau filtre s'est débarrassé de l'erreur, mais le filtre imprime toujours le balisage HTML dans la cellule sous forme de texte. Je vais relier un exemple de plumrer séparé pour ce problème quand je peux.


Désolé pour le retard. Si vous pouvez produire une plunkr, je suis heureux de vous promener. Le service $ SCE devrait vous permettre de retourner HTML à votre vue.


3 Réponses :


10
votes

Je ne suis pas sûr que je comprends votre code.

Vous ne devez pas mettre de code HTML dans vos données. Donc, je l'ai changé à: xxx

Suivant: Dans votre modèle de cellule, transmettez une référence à la valeur qui change: xxx

Notez que la fonction showme () a maintenant un paramètre: xxx

dans la portée externe, vous devez réagir au paramètre: < Pré> xxx

(Vous n'avez pas vraiment besoin PileProp )

the $ pérature.toggle () fonction peut être Supprimé, ou peut être appelé à partir de showme () .

En outre, j'ai ajouté une aide de débogage sur votre HTML pour vous montrer que les travaux de liaison sont plutôt bien: < Pré> xxx

voici un PLUCKER . Est-ce ce que vous voulez?

Mise à jour:

Voici une autre PLUCKER qui présente la case à cocher dans la colonne 4.


1 commentaires

Mettre HTML dans les données est quelque chose que je fais du côté du client. Lorsque les données sont entrées dans I, je vérifie chaque article des propriétés "autorisations". Par exemple, si "autorisations" a "CANEDIT: vrai", "HASDOCUMUMUMENT: TRUE" Je dois afficher ces icônes correspondantes dans une seule cellule. L'icône du document doit avoir un lien qui lui est associé au fichier actuel. Dans JQGRID, j'ai résolu ceci en utilisant une fonction "AfterSerRowow". Mais dans UI-Grid, je ne sais pas comment faire la même chose. Devrais-je poster une nouvelle question à ce sujet? Si je l'ai fait correctement, je n'aurais pas un problème de Cochez la casque de coche?



3
votes

Voici un PLUCKER avec Appscope, externe-Scopes ne fonctionne plus.

J'ai apporté des modifications à travailler avec de nouvelles Appscope: p> xxx pré>

dans la portée, vous devez réagir au paramètre mais j'ai tiré de MyViewModel et je viens de créer un Fonction Inside intérieure: P>

$scope.showMe : function(value){
     alert('toggled to: '+value);
};


3 commentaires

Veuillez inclure les bits de code correspondants dans votre réponse.


Je n'ai jamais publié ici. Il a fait du temps pour comprendre pourquoi mon code n'allait pas à la réponse.


La sortie de Plunkr est cassée. Ne peut pas voir la table.



0
votes

Vous devez utiliser $ SCE pour dire NG-BIND-HTML que le contenu HTML que vous attachez est sûr.

J'ai fourbé votre plumker et la solution à votre question est http://plnkr.co/edit/jytaf8nijlf9wpb775kb?p=preview p>

    app.filter('unsafe', function ($sce) {
       return $sce.trustAsHtml;
    });


0 commentaires