javascript - 在 Controller 中传递 html 字符串并放入 .html (Angular js)

标签 javascript html angularjs angularjs-bindings angularjs-sce

我有一个问题。根据需要将我的按钮称为“关闭”或“打开”。如果 json 中的事件状态为 1,则按钮关闭将显示在 html 中,因此改为。但我已经尝试过

ng-bind-html

还是不行,有什么解决办法吗?谢谢

这是我的代码:

Controller

if(item.active === 1){
    html_button = '<button type="button" class="btn btn-success"><i class="fa fa-toggle-on"></i> On</button>';

}else{
   console.log(1);
    html_button = '<button type="button" class="btn btn-default"><i class="fa fa-toggle-off"></i> Off</button>';
}

$scope.getButtonOnOff = function(html_button) {

    return $sce.trustAsHtml(html_button);

};

HTML

<span ng-if="data.active === 1">
            <button ng-show="data.active" type="button" class="btn btn-default" ng-click="FiturThread(data)"><i class="fa fa-toggle-off"></i> Off</button>
            <button ng-hide="data.active" type="button" class="btn btn-success" ng-click="FiturThread(data)"><i class="fa fa-toggle-on"></i> On</button>
        </span>
        <span ng-if="data.active === 0">
            <button ng-show="data.active" type="button" class="btn btn-success" ng-click="FiturThread(data)"><i class="fa fa-toggle-on"></i> On</button>
            <button ng-hide="data.active" type="button" class="btn btn-default" ng-click="FiturThread(data)"><i class="fa fa-toggle-off"></i> Off</button>
        </span>

最佳答案

让我们尝试 Angular 方式

<td width="20%">
        <button type="button" class="btn btn-primary" ng-click="getData(data)"><i class="fa fa-edit"></i> Edit</button>
        <button ng-show="item.active" type="button" class="btn btn-default"><i class="fa fa-toggle-on"></i> On</button>
        <button ng-hide="item.active" type="button" class="btn btn-default"><i class="fa fa-toggle-off"></i> Off</button>
</td>

关于javascript - 在 Controller 中传递 html 字符串并放入 .html (Angular js),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42312611/

相关文章:

javascript - JavaScript 中 "global"变量的最佳实践?

javascript - 使用 Javascript 和 Ajax 的 Rails 开发环境

javascript - 将插入符号值设置到某个位置后无法获取插入符号位置值

html - 连字符 : auto do not break pseudo words like ***************

javascript - 在 AngularJS 中删除对象后刷新 JSON

javascript - 使用 MySQL 和 Node.js 更新查询

javascript - BaseResponseOptions angular2 处理全局错误

javascript - JQuery 高度不返回准确高度

javascript - 如何将 angular-ui-slider 包含到我的应用程序中? (TypeError : elm. slider 不是一个函数)

javascript - 如何使用 uib 分页检查和取消检查当前页面中的所有行?