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

时间:2018-09-24 15:53:00

标签: angularjs angularjs-ng-repeat

我使用NG-Repeat重复JSON对象。我如何在此处包括html之类的链接:

sudo -s

1 个答案:

答案 0 :(得分:1)

您需要使用$sce来信任HTML。我喜欢创建一个过滤器,并在ng-bind-html标签上使用<span>。使用过滤器可以非常轻松地在需要的地方显示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>