如何在 ng-repeat 中使字段显示为没有 HTML 代码的文本答案

【问题标题】：How to make a field displays as text without HTML code inside ng-repeat如何在 ng-repeat 中使字段显示为没有 HTML 代码的文本
【发布时间】：2019-06-09 17:25:00
【问题描述】：

我有一个类似的数据结构：

books = [
            {
                id: 'id1',
                content: {
                    name: '<p><span>name</span><span>1</span></p>',
                    price: 'price1',
                    date: 'd1'
                }
            },
            {
                id: 'id2',
                content: {
                    name: '<p><span>name</span><span>2</span></p>',
                    price: 'price2',
                    date: 'd2'
                }
            },
            {
                id: 'id3',
                content: {
                    name: '<p><span>name</span><span>3</span></p>',
                    price: 'price3',
                    date: 'd3'
                }
            }
        ]

如何在没有HTML的外部事件框中显示名称字段？ 我试过 ng-bind-html-unsafe="book.content['name'] 但它不起作用。

<body ng-controller="MainCtrl">
<div id='external-events'>
  <h4 >Draggable books</h4>

     <li ng-repeat="book in books track by $index"  
             id="book.id">
          <ul class="fc-event" data-drag="true"  data-jqyoui-options="{revert: 'invalid'}" jqyoui-draggable="{index {{$index}},placeholder:true,animate:true}">
            <li ng-bind-html-unsafe="book.content['name']"> {{book.content['name']}}</li>
            <li>{{book.content['price']}}</li>
            <li>{{book.content['date']}}<br></li>
           </ul>
      </a>
  </div>
<div id='calendar-container'>
  <div id='calendar'></div>
</div>
</body>

您可以在下面找到为此目的创建的代码笔

https://codepen.io/adier/pen/KbEpWQ?editors=1111

非常感谢。

【问题讨论】：

标签： javascript jquery angularjs fullcalendar fullcalendar-scheduler

【解决方案1】：

从 li 元素中删除 {{book.content['name']}}。你有一个属性指令ng-bind-html-unsafe 可以解决问题：

 <li ng-bind-html="book.content['name']"></li>

更新

将ng-bind-html-unsafe 替换为ng-bind-html 指令。

在控制器中注入$sce 服务并为每本书执行$sce.trustAsHtml(book.content.name);

所以它看起来像：

  $scope.books.forEach(function(book) {
    book.content.name = $sce.trustAsHtml(book.content.name);
  })

小提琴：https://codepen.io/gudzdanil/pen/vvPJYr?editors=1111

【讨论】：

谢谢丹尼尔，但我应用了你的想法，但它也删除了名称的显示，这意味着我最终将只显示 2 个字段价格和日期，不显示名称。
非常感谢丹尼尔。