web-dev-qa-db-fra.com

angular.js ng-repeat li items avec contenu html

J'ai un modèle qui provient du serveur et qui contient du HTML au lieu de texte (par exemple une balise b ou une balise i) 
Lorsque j'utilise ng-repeat pour construire une liste, le html est affiché sous forme de texte pur. Existe-t-il un filtre intégré ou une directive qui place le html dans les éléments li ou non? 
J'ai regardé dans la documentation, mais comme je suis encore très novice, j'ai du mal à la trouver.

ng-repeat:

    <li ng-repeat="opt in opts">

JSFiddle: 

http://jsfiddle.net/gFFBa/1/

javascripthtmlangularjs
32
J.Pip

Cela ressemble à ng-bind-html-unsafe="opt.text": 

<div ng-app ng-controller="MyCtrl">
    <ul>
    <li ng-repeat=" opt in opts" ng-bind-html-unsafe="opt.text" >
        {{ opt.text }}
    </li>
    </ul>

    <p>{{opt}}</p>
</div>

http://jsfiddle.net/gFFBa/3/

Ou vous pouvez définir une fonction dans la portée:

 $scope.getContent = function(obj){
     return obj.value + " " + obj.text;
 }

Et utilisez-le de cette façon:

<li ng-repeat=" opt in opts" ng-bind-html-unsafe="getContent(opt)" >
     {{ opt.value }}
</li>

http://jsfiddle.net/gFFBa/4/

Notez que vous ne pouvez pas le faire avec une balise option: Puis-je utiliser des balises HTML dans les options pour sélectionner des éléments?

43
Cherniv

Notez que ng-bind-html-unsafe n'est plus pris en charge par rc 1.2. Utilisez plutôt ng-bind-html. Voir: Une fois ng-bind-html-unsafe supprimé, comment puis-je injecter du HTML?

11
Peter Drinnan

Vous pouvez utiliser NGBindHTML ou NGbindHtmlUnsafe ceci n'échappera pas au contenu html de votre modèle.

http://jsfiddle.net/n9rQr/

<div ng-app ng-controller="MyCtrl">
    <ul>
    <li ng-repeat=" opt in opts"  ng-bind-html-unsafe="opt.text">
        {{ opt.text }}
    </li>
    </ul>

    <p>{{opt}}</p>
</div>

Cela fonctionne, de toute façon, vous devez faire très attention lorsque vous utilisez le contenu unsanitizedhtml, vous devez vraiment faire confiance à la source du contenu.

8
Atropo

utiliser ng-bind-html-unsafe

il appliquera le code HTML avec le texte à l'intérieur comme ci-dessous:

    <li ng-repeat=" opt in opts" ng-bind-html-unsafe="opt.text" >
        {{ opt.text }}
    </li>
4
Nitu Bansal

Si vous voulez qu'un élément contienne une valeur HTML, jetez un coup d'œil à ngBindHtmlUnsafe .

Si vous souhaitez styler les options dans une sélection native, non, ce n'est pas possible.

3
Nikos Paraskevopoulos

Voici la directive des exemples officiels angular docs v1.5 qui montre comment compiler html:

.directive('compileHtml', function ($compile) {
  return function (scope, element, attrs) {
    scope.$watch(
      function(scope) {
        return scope.$eval(attrs.compileHtml);
      },
      function(value) {
        element.html(value);
        $compile(element.contents())(scope);
      }
    );
  };
});

Usage:

<div compile-html="item.htmlString"></div>

Il insérera la propriété item.htmlString sous la forme HTML n'importe où, comme

<li ng-repeat="item in itemList">
    <div compile-html="item.htmlString"></div>
3
v.babak

ng-bind-html-unsafe est obsolète depuis 1.2. La bonne réponse devrait être actuellement:

Côté HTML: (identique à la réponse acceptée indiquée):

<div ng-app ng-controller="MyCtrl">
   <ul>
      <li ng-repeat=" opt in opts" ng-bind-html-unsafe="opt.text">
        {{ opt.text }}
      </li>
   </ul>

   <p>{{opt}}</p>
</div>

Mais du côté du contrôleur:

myApp.controller('myCtrl', ['$scope', '$sce', function($scope, $sce) {
// ...
   $scope.opts.map(function(opt) { 
      opt = $sce.trustAsHtml(opt);
   });
}
1
Asqan