在 AngularJS 中创建 HTML Table
Creating HTML Table in 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;
我正在尝试在 $Scope.rTable
中传递 HTML 代码,但它没有呈现 table,而是显示输出中的 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>
我想要它:
这是一种不正确的编码方式。
代码应该像
在控制器中
$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
使用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>
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 代码,但它没有呈现 table,而是显示输出中的 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>
我想要它:
这是一种不正确的编码方式。 代码应该像
在控制器中
$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
使用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>