Angular.js ng-repeat li элементы с содержимым html

У меня есть модель, которая возвращается с сервера, который содержит html вместо текста (например, тег b или тег i)
когда я использую ng-repeat для создания списка из него, он показывает html как чистый текст, есть ли встроенный фильтр или директива, которые помещают html внутри элементов li или нет?
Я просмотрел документацию, но, поскольку я все еще очень новичок в этом, мне трудно найти его.

нг-повтор:

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

JSFiddle:

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

Ответы

Ответ 1

Это выглядит как 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/

Или вы можете определить функцию в области видимости:

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

И используйте его так:

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

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

Обратите внимание, что вы не можете сделать это с помощью тега option: Могу ли я использовать теги HTML в параметрах для отдельных элементов?

Ответ 3

Вы можете использовать NGBindHTML или NGbindHtmlUnsafe это не приведет к отсутствию содержимого html вашей модели.

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>

Это работает, в любом случае вы должны быть очень осторожны при использовании контента unsanitized html, вы должны действительно доверять источнику контента.

Ответ 4

использовать ng-bind-html-unsafe

он применит html с текстом внутри, как показано ниже:

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

Ответ 5

Если вы хотите, чтобы какой-либо элемент содержал значение, являющееся HTML, взгляните на ngBindHtmlUnsafe.

Если вы хотите изменить параметры стиля в нативном выборе, это невозможно.

Ответ 6

Вот директива из официальных примеров angular docs v1.5, которая показывает, как скомпилировать 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);
      }
    );
  };
});

Использование:

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

Он введет свойство item.htmlString как html в любом месте, например

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

Ответ 7

ng-bind-html-unsafe устарел из 1.2. Правильный ответ должен быть в настоящее время:

HTML-сторона: (так же, как и принятый ответ):

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

Но на стороне контроллера:

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