Вставить угловой в HTML, созданный Javascript

Question

У меня есть таблица, объявленная статически с помощью html, и количество строк таблицы зависит от информации, хранящейся в базе данных.Ячейки создаются с использованием функции insertRow Javascripts, и я могу получить доступ к элементу TD с помощью table.row [x] .cells [y].Моя цель - вставить md-кнопку Angular вместо атрибута кнопки HTML, который я создал с помощью .innerHTML.

Answer 1

Если вы используете angular - тогда вы должны использовать директивы ng-repeat (или * ngFor в Angular 2+), чтобы добавить контент на страницу вместо использования javascript. Следующее даст таблицу с двумя строками и 3 тд на тр.

Так что на самом деле это скорее случай получения ваших данных, добавления их в $ scope и форматирования таким образом, чтобы вы могли выполнять итерации в ng-repeat.

Если вы действительно хотите сохранить его таким, каким он есть, - просто создайте кнопку и стилизуйте ее со стиленгом, чтобы она выглядела как кнопка, которая вам нравится.

var angularTest = angular.module('angularDiv',[]);

angularTest.controller('tableController', ['$scope', function($scope) {
  
  $scope.items= [
    { contents: ['content 1.1', 'content 1.2','content 1.3']},
    { contents: ['content 2.1', 'content 2.2','content 2.3']},
  ];
}])

table {border-collapse: collapse}
th {
 border: solid 1px #d4d4d4;
 padding: 5px 10px;
 background: #ededed;
 border-bottom-width: 2px
 }
 
 td {
 border: solid 1px #d4d4d4;
 padding: 5px 10px;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div  ng-app="angularDiv">
  <table ng-controller="tableController">
    <thead>
      <tr>
        <th ng-repeat="heading in items[0].contents">
          Heading {{$index + 1}}
         </th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in items">
       <td ng-repeat ="content in item.contents">{{content}}</td>
    </tbody>
  </table>
</div>