zoukankan      html  css  js  c++  java
  • service $sce or ng-bind-html

    ng-bind-html:
    一般搭配 $sce.trutsAsResourceUrl $sce.trutsAsHtml

    <html>
    <head>
        <meta charset="utf-8">
        <script src="js/angular.js"></script>
    </head>
    <body>
    <div ng-app="myApp" ng-controller="myCtrl">
        未处理的:
        <div ng-repeat="item in formData">
            {{item.name}} :{{item.htmlVal}}
        </div>
    
        <br/>处理过的:<button ng-click="look()">查看处理结果</button>
        <div ng-repeat="item in data">
            {{item.name}} :<p ng-bind-html="item.htmlVal"></p>
        </div>
    </div>
    
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope,$sce){
            //未处理数据源
            $scope.formData=[
                {"name":"大鸟","htmlVal":"我是<span style='color:red;'>大鸟<span>"},
                {"name":"小鸟","htmlVal":"我是<span style='color:red;'>小鸟<span>"}
            ];
    
            //处理结果
            $scope.look = function(){
                $scope.data=[
                    {"name":"大鸟","htmlVal":"我是<span style='color:red;'>大鸟<span>"},
                {"name":"小鸟","htmlVal":"我是<span style='color:red;'>小鸟<span>"}
    
                for(var i=0;i<$scope.data.length;i++){
                    $scope.data[i].htmlVal = $sce.trustAsHtml($scope.data[i].htmlVal);
                }
            };
    
        });
    </script>
    </body>
    </html>
  • 相关阅读:
    gulp备忘
    好文收藏
    妙味H5交互篇备忘
    [CSS3备忘] transform animation 等
    css选择器总结
    flexbox备忘
    函数
    继承2
    在 Swift 中实现单例方法
    浅谈 Swift 中的 Optionals
  • 原文地址:https://www.cnblogs.com/ms-grf/p/7064098.html
Copyright © 2011-2022 走看看