Как сделать так, чтобы поле отображалось как текст без HTML-кода внутри ng-repeat - PullRequest
Новая
       12

Как сделать так, чтобы поле отображалось как текст без HTML-кода внутри ng-repeat

0 голосов
/ 15 января 2019

У меня есть такая структура данных: 

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

Многиеспасибо.

1 Ответ

0 голосов
/ 15 января 2019

Удалить {{book.content['name']}} из элемента li. У вас есть директива атрибута 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

...