在 AngularJS 中创建 HTML 表格答案

【问题标题】：Creating HTML Table in AngularJS在 AngularJS 中创建 HTML 表格
【发布时间】：2018-08-23 04:28:02
【问题描述】：

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;

我正在尝试在$Scope.rTable 中传递 HTML 代码，但不是渲染表格，而是显示输出中的 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>

我想要这样：

【问题讨论】：

将ng-bind-html="rTable" 与ngSanitize 模块一起使用。或者用$compile（在指令中）编译它

标签： html angularjs html-table angularjs-scope

【解决方案1】：

这是一种不正确的编码方式。代码应该是这样的

在控制器中

$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

【讨论】：

谢谢，但我想做的事情不可能像这样，我需要一种在运行时创建表的方法。
你能解释一下为什么需要动态创建表的场景吗？

【解决方案2】：

使用 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>

【讨论】：