在 NG-Repeat 中添加 html 到 json 内容

Question

我正在使用 NG-Repeat 重复 JSON 的对象。如何在此处包含 html，例如 link：

        {id: "53",  description: "here is a <a href = '#/detail/'>Link</a> to something", additional: ["2.jpg", "3.jpg" ]}

Answer 1

您需要使用 $sce 来信任 HTML。我喜欢创建一个过滤器并在 <span> 标签上使用 ng-bind-html。使用过滤器可以非常简单地在任何需要的地方显示 HTML。这是一个简单的例子。

angular.module('app', [])
  .filter('unsafe', ($sce) => {
    return function(value) {
      return $sce.trustAsHtml(value);
    }
  })
  .controller('ctrl', ($scope) => {
    $scope.items = [{
        id: "53",
        description: "here is a <a href = '#/detail/'>Link</a> to something",
        additional: ["2.jpg", "3.jpg"]
      },
      {
        id: "54",
        description: "here is another <a href = '#/detail/'>Link</a> to something",
        additional: ["4.jpg", "5.jpg"]
      }
    ];
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <ul>
    <li ng-repeat="item in items"><span ng-bind-html="item.description | unsafe"></span></li>
  </ul>
</div>

在 NG-Repeat 中添加 html 到 json 内容

Add html to json content in an NG-Repeat

angularjs

angularjs-ng-repeat