angular.html 콘텐츠 포함 ng-html li 항목

angular.html 콘텐츠 포함 ng-html li 항목

서버에서 가져온 모델이 텍스트 대신 html을 포함하고 있습니다(예를 들어 b태그나 i태그).
ng-repeat을 사용하여 목록을 작성하면 html이 순수 텍스트로 표시되는데, li 항목에 html을 넣는 필터나 지시문이 내장되어 있습니까?
서류를 찾아봤는데 아직 처음이라서 찾기가 어려워요.

ng-syslog:

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

JSFiddle:

http://jsfiddle.net/gFFBa/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/

단, 이 기능을 사용하는 경우에는optiontag: 선택 요소 옵션에 HTML 태그를 사용할 수 있습니까?

ng-bind-html-unsafe는 rc 1.2에서는 지원되지 않습니다.대신 ng-bind-html을 사용합니다.참고 항목: ng-bind-html-unsafe를 삭제한 상태에서 HTML을 삽입하려면 어떻게 해야 합니까?

NGBind를 사용할 수 있습니다.HTML 또는 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콘텐츠의 출처를 정말 신뢰해야 합니다.

사용하다ng-bind-html-unsafe

다음과 같이 텍스트가 포함된 html이 적용됩니다.

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

다음은 html을 컴파일하는 방법을 나타내는 공식 예시의 angular docs v1.5에서 지시한 것입니다.

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

HTML 값을 포함하는 요소가 있는 경우 ngBindHtmlUnsafe를 참조하십시오.

기본 선택 항목에서 옵션을 스타일링하려면 아니요.

ng-syslog-syslog는 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);
   });
}

언급URL : https://stackoverflow.com/questions/19111337/angular-js-ng-repeat-li-items-with-html-content