ionic ng-bind-html

最新推荐文章于 2021-06-24 18:32:32 发布

KingCruel

最新推荐文章于 2021-06-24 18:32:32 发布

阅读量1k

点赞数

分类专栏： Ionic 文章标签： ionic ng-bind-html

本文链接：https://blog.csdn.net/kingcruel/article/details/70039281

版权

Ionic 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1、ionic ng-bind-html 指令

ng-bind-html 指令是通一个安全的方式将内容绑定到 HTML 元素上。

2、html

<element ng-bind-html="model.htmlStr"></element>
<element ng-bind-html="formatProperty(item.VendorInfo.Property)"></element>

<span class="item-note text-orange" ng-bind="formatPaymentType(model.deliveryDetail.PaymentTypeId)"></span>
<span class="badge badge-assertive"><i class="icon ion-flash"></i>&nbsp; {{formatOrderState(model.deliveryDetail.OrderState)}}</span>

3、controller

app.controller('MessageCtrl', function ($scope, $sce) {
    $scope.model = {
        "htmlStr": $sce.trustAsHtml('<i class="icon ion-tips">hello</i>')
    };

    $scope.displayProperty = function (property) {
        switch (property) {
            case 1:
                return $sce.trustAsHtml('<i class="icon ion-tips">hello</i>');
            case 2:
                return $sce.trustAsHtml('<i class="icon ion-tips">world</i>');
            case 3:
                return $sce.trustAsHtml('<i class="icon ion-tips">hello</i> <i class="icon ion-tips">world</i>');
            default:
                return $sce.trustAsHtml('<i class="icon ion-tips">hello</i>');
        }
    }

    $scope.formatPaymentType = function (type) {
        switch (type) {
            case 1:
                return "货到付款";
            case 2:
                return "在线支付";
            case 3:
                return "在线支付";
            case 4:
                return "在线支付";
            case 5:
                return "代金券";
            default:
                return "在线支付123";
        }
    }

    $scope.formatOrderState = function (type) {
        switch (type) {
            case 0:
                return "等待商户响应";
            case 1:
                return "交易已完成";
            case 2:
                return "商户已接单";
            case 3:
                return "商户已接单";
            default:
                return "555666";
        }
    }

});