如何使用angularjs ng-repeat将html字符串从数组转换为html
How to turn an html string from an array into html using angularjs ng-repeat?
我有以下数组,其中每个项目的值都是一个 html 字符串。如何将此字符串转换为可执行的 html,以便可以显示它?
[
{html:'<button>name</button>'},
{html:'<table > <thead> <tr> <th>#</th> <th>UserName</th> <th>Time</th> <th>Comments</th> <th>Reply</th> <!-- <th>like or dislike</th> --> </tr> </thead> <tbody> <tr> <td>1,001</td> <td><a href="#" >Lorem</a></td> <td>2014-10-31</td> <td>ipsum</td> <td> <button type="submit" > <span ></span></button></td> </tr> <tr> <td>1,002</td> <td>amet</td> <td><a><span ></span></a></td> <td><a><span ></span></a></td> <td> <button type="submit" > <span ></span></button></td> </tr> <tr> <td>1,003</td> <td>Integer</td> <td>nec</td> <td>odio</td> <td> <button type="submit"> <span></span></button></td> </tr> <tr> <td>1,003</td> <td>libero</td> <td>Sed</td> <td>cursus</td> <td> <button type="submit" > <span></span></button></td> </tr> </tbody> </table>'},
{html:'<p>myhtml</p>'}
]
请参阅此处的代码笔:http://codepen.io/chriscruz/pen/YPwVmb
请参阅下面的 HTML
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<th>Email</th>
</thead>
<tbody>
<tr ng-repeat="(id,item) in data">
<td>{{item.html}}</td>
</tr>
</tbody>
</table>
</body>
Javascript 和 Angular JS
var app = angular.module("app", ["firebase"]);
app.factory("TestArray", ["$firebase", function($firebase) {
lst = [
{html:'<button>name</button>'},
{html:'<table > <thead> <tr> <th>#</th> <th>UserName</th> <th>Time</th> <th>Comments</th> <th>Reply</th> <!-- <th>like or dislike</th> --> </tr> </thead> <tbody> <tr> <td>1,001</td> <td><a href="#" >Lorem</a></td> <td>2014-10-31</td> <td>ipsum</td> <td> <button type="submit" > <span ></span></button></td> </tr> <tr> <td>1,002</td> <td>amet</td> <td><a><span ></span></a></td> <td><a><span ></span></a></td> <td> <button type="submit" > <span ></span></button></td> </tr> <tr> <td>1,003</td> <td>Integer</td> <td>nec</td> <td>odio</td> <td> <button type="submit"> <span></span></button></td> </tr> <tr> <td>1,003</td> <td>libero</td> <td>Sed</td> <td>cursus</td> <td> <button type="submit" > <span></span></button></td> </tr> </tbody> </table>'},
{html:'<p>myhtml</p>'}
]
return lst;
}]);
app.controller("ctrl", ["$scope","TestArray", function($scope,TestArray) {
$scope.data = TestArray;
//$scope.data = Emails;
}]);
这是我希望看到的预期结果:http://codepen.io/chriscruz/pen/pvgwzw?editors=101
这是更新的代码笔
您需要添加angular-sanitize.js
文件
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-sanitize.js"></script>
并在app
中导入ngSanitize
模块
var app = angular.module("app", ["firebase",'ngSanitize']);
然后你可以使用 ng-bind-html
指令绑定 HTML
<td ng-bind-html="item.html"></td>
相关文章:
- 使用jQuery在html数组中设置一个值
- HTML 数组乘以 javascript
- 如何在javascript中处理html数组元素,并使用ajax将它们传递给控制器
- 无法将html数组传递给JS
- 使用 jQuery 更改基于下拉 html 数组的文本框
- 如何动态添加HTML数组元素[]
- 如何从HTML数组中获取文本区域的值
- PHP中的HTML数组字段解析
- Javascript html 数组未保存和显示
- HTML数组脚本不工作(in_Array未定义)
- 从动态HTML数组创建对象
- 根据输出对HTML数组进行排序
- 在js php/html数组中保存/检索复选框
- 通过PHP迭代HTML数组
- 使用Javascript获取HTML数组长度
- 使用html数组按名称获取元素
- 从HTML "数组"javascript数组
- 我可以在JavaScript中选择一个多维HTML数组作为多维数组吗
- 如何使用jQuery将值插入到html数组中
- 如何通过AJAX发送HTML数组