Angularjs 如何使用ng bind和ng repeat为表元素绑定html字符串

我对AngularJS是新手。我有一个HTML字符串，我需要将它绑定到一个表元素，但是在绑定过程中会得到不同的结果

请找到我的代码的JSFIDLE映像

HTML

<div ng-app ng-controller="MyCtrl">
    <table>
        <td>ABC</td>
        <td>XYZ</td>
        <!-- Direct bind using span-->
        <span><tr><td>Akshay</td></tr><tr><td>Jain</td></tr></span>
        <span><tr><td>Bangalore</td></tr></span>
        <!-- Bind using ng-bind-html-->
        <span ng-repeat="opt in opts" ng-bind-html="opt.text"></span>
    </table>
</div>

---

如果您可以看到，当我尝试直接在HTML中绘制值时，我的代码与使用ng bind时的代码不同。请帮助我知道哪里出了问题。

请在问题中添加代码，而不是图像。也就是说，Angular需要呈现安全的HTML，因此在

$scope

旁边插入

$sce

模块，并将HTML作为

$sce.trustAsHtml（）

发送回。请参阅@SterlingArcher，我现在添加了代码。我很快会用$sce修复它。但是，正如您所看到的，当我直接在HTML中编写值时，结果是不同的，而当我使用ng bind绑定值时，结果是不同的。请帮助

ng bind html unsafe=“opt.text”

您需要删除

unsafe

并对您的对象执行

text:$sce.trustAsHtml（“此处的表格html”）

。@SterlingArcher，我已经添加了$sce服务并调用了它的方法。然而，我仍然没有得到回应。请帮助请在问题中添加代码，而不是图像。也就是说，Angular需要呈现安全的HTML，因此在

$scope

旁边插入

$sce

模块，并将HTML作为

$sce.trustAsHtml（）

发送回。请参阅@SterlingArcher，我现在添加了代码。我很快会用$sce修复它。但是，正如您所看到的，当我直接在HTML中编写值时，结果是不同的，而当我使用ng bind绑定值时，结果是不同的。请帮助

ng bind html unsafe=“opt.text”

您需要删除

unsafe

并对您的对象执行

text:$sce.trustAsHtml（“此处的表格html”）

。@SterlingArcher，我已经添加了$sce服务并调用了它的方法。然而，我仍然没有得到回应。请帮忙

function MyCtrl($scope, $sce) {

    $scope.opts = [
        {
            value: 222,
            text: '<tr><td><i>Akshay</i></td></tr><tr><td>Jain</td></tr><tr><td>Bangalore</td></tr>'
        }
    ];

    $scope.opts[0].text = $sce.trustAsHtml($scope.opts[0].text);

}

AkshayJainBangalore
ABC XYZ
Akshay
Jain
Bangalore