wake-up-neo.com

angle.js ng-repeat li Elemente mit HTML-Inhalt

Ich habe ein Modell, das vom Server zurückkommt und HTML anstelle von Text enthält (z. B. ein B-Tag oder ein I-Tag). 
wenn ich mit ng-repeat eine liste daraus aufbaue, wird die html als reiner text angezeigt. Gibt es einen eingebauten filter oder eine Direktive, die die html in die li-Elemente einfügen oder nicht? 
Ich habe in der Dokumentation nachgesehen, aber da ich noch ganz neu bin, habe ich Schwierigkeiten, sie zu finden.

wiederholung:

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

JSFiddle: 

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

32
J.Pip

Es geht wie 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/

Oder Sie können eine Funktion im Umfang definieren:

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

Und benutze es so:

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

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

Beachten Sie, dass dies mit einem option-Tag nicht möglich ist: Kann ich HTML-Tags in den Optionen für ausgewählte Elemente verwenden?

43
Cherniv

Beachten Sie, dass ng-bind-html-unsafe in rc 1.2 nicht mehr unterstützt wird. Verwenden Sie stattdessen ng-bind-html. Siehe: Wie füge ich HTML ein, wenn ng-bind-html-unsafe entfernt wurde?

11
Peter Drinnan

Sie können NGBindHTML oder NGbindHtmlUnsafe verwenden, um den html-Inhalt Ihres Modells nicht zu schützen.

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>

Dies funktioniert, trotzdem sollten Sie sehr vorsichtig sein, wenn Sie unsanitizedhtml Inhalte verwenden. Sie sollten wirklich vertrauen der Quelle des Inhalts.

8
Atropo

verwenden Sie ng-bind-html-unsafe

es wird HTML mit Text wie unten angewendet:

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

Wenn ein Element einen Wert enthalten soll, der HTML ist, werfen Sie einen Blick auf ngBindHtmlUnsafe .

Wenn Sie Optionen in einer Auswahl von native formatieren möchten, ist dies nicht möglich.

Hier ist eine Direktive aus den offiziellen Beispielen angle docs v1.5, die zeigt, wie man HTML kompiliert:

.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);
      }
    );
  };
});

Verwendungszweck:

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

Es wird die item.htmlString -Eigenschaft an beliebiger Stelle als html einfügen, z

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

ng-bind-html-unsafe ist seit 1.2 veraltet. Die richtige Antwort sollte aktuell sein:

HTML-Seite: (das gleiche wie die akzeptierte Antwort angegeben):

<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>

Aber auf der Controller-Seite:

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