Создание HTML-таблицы в AngularJS

var str1 = "Sarah";
var str2 = "Tom";
var strTable = "<table style='width:100%'><tr><th>"+ str1 +"</th><th>"+ str2 +"</th> <th>Age</th> </tr> <tr> <td>Jill</td><td>Smith</td><td>50</td></tr></table>";

$scope.rTable= strTable;

Я пытаюсь передать HTML-код в $Scope.rTable, но вместо рендеринга таблицы он показывает HTML-код в том виде, в каком он находится на выходе.

т.е.

<table style='width:100%'><tr><th>Sarah</th><th>Tom</th> <th>Age</th> </tr> <tr> <td>Jill</td><td>Smith</td><td>50</td></tr></table>

Я хочу, чтобы это было так:

Создание HTML-таблицы в AngularJS

используйте ng-bind-html = "rTable" с модулем ngSanitize. Или скомпилируйте с $compile (в директиве)

— 14.03.2018 16:10

html angularjs html-table angularjs-scope

14.03.2018 16:06

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

1 569

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Это неправильный способ кодирования. Код должен быть похож на

В контроллере

$scope.str1 = "Sarah";
$scope.str2 = "Tom";

В HTML

Считая имя вашего контроллера DemoController

<body ng-controller = "DemoController">
<table style='width:100%'>
    <tr><th> {{str1}} </th>
        <th> {{str2}} </th>
        <th>Age</th> 
    </tr> 
</table>
</body>

И если ваши данные огромны, рекомендуется использовать массив объектов с ng-repeat. Вы можете прочитать это здесь -> https://docs.angularjs.org/api/ng/directive/ngRepeat

Спасибо, но то, что я хотел сделать, невозможно, мне нужен был способ создания таблицы во время выполнения.

— 14.03.2018 17:42

Не могли бы вы объяснить сценарий, почему вам нужно динамически создавать таблицу?

— 15.03.2018 09:14

14.03.2018 16:12

Ответ принят как подходящий

Используйте ng-bind-html и $ sce.

Контроллер

app.controller('MainCtrl', function($scope, $sce) {

  var str1 = "Sarah";
  var str2 = "Tom";
  var strTable = "<table style='width:100%'><tr><th>" + str1 + "</th><th>" + str2 + "</th> <th>Age</th> </tr> <tr> <td>Jill</td><td>Smith</td><td>50</td></tr></table>";
  $scope.rTable = $sce.trustAsHtml(strTable);
});

HTML

  <body ng-controller = "MainCtrl">
    <div ng-bind-html = "rTable"></div>
  </body>

14.03.2018 16:17

Другие вопросы по теме

Текущий элемент Angular JS выберите, как jQuery, этот селектор

Как получить и использовать результат асинхронной функции, находящейся внутри синхронной?

Angular js - создание собственных сервисов

Как отключить автоматическую настройку часового пояса в AngularJS?

Много функций в контроллере на AngularJS?

Поиск пар в объекте JavaScript

Транспортир - ждать загрузки элемента / страницы / углового

Angular JS Pagination сохраняет предыдущее значение фильтра в $ LocalStorage,

Невозможно щелкнуть значок с помощью транспортира

Сортировка вложенного массива на основе второго вложенного массива

Создание HTML-таблицы в AngularJS

Ответы 2

Другие вопросы по теме

Похожие вопросы