码迷,mamicode.com
首页 > Web开发 > 详细

Angular filter output html

时间:2015-10-15 18:39:05      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:

写一个页面,在显示status(只有两种值1或0)时,为了让页面好看,当status为1时显示蓝颜色的小圆圈,为0时显示红色的小圆圈;

最开始用ngClass:

<span class="circle" ng-class="{‘disabled‘:robot.status != ‘1‘,‘enabled‘:robot.status == ‘1‘}"></span> 

 

但是,仅仅显示个圆圈,没有title,用户不知道是啥意思,所以改用directive:

app.directive(‘robotStatusClass‘,function(){
        return {
            restrict: "A",
            require:‘^ngModel‘,
            scope:{
                status:‘=ngModel‘
            },
            template:‘<span class="circle" ng-class="class" title="{{status}}"></span>‘,
            link:function(scope){
                if (scope.status == ‘1‘){
                    scope.class = ‘enabled‘;
                    scope.title = ‘正常‘;
                }else{
                    scope.class = ‘disabled‘;
                    scope.title = ‘异常‘;
                }
            }
        };
    });

但是问题又来了,因为页面有心跳包,status时可能会变化,写的directive不符合要求,gg半天也没解决问题;

于是最后用filter来解决:

 

function robotStatusClass(){
        return function(input){
            if(input == ‘1‘){
                return ‘<span class="circle enabled" title="正常"></span>‘;
            }else{
                return ‘<span class="circle disabled" title="异常"></span>‘;
            }
        }
    }

 

没想到显示的竟然是字符串....最后gg找到了解决办法:

function robotStatusClass($sce){
        return function(input){
            if(input == ‘1‘){
                return $sce.trustAs(‘html‘,‘<span class="circle enabled" title="正常"></span>‘);
            }else{
                return $sce.trustAs(‘html‘,‘<span class="circle disabled" title="异常"></span>‘);
            }
        }
    }
//
<p class="form-control-static pull-left"  ng-bind-html="status | robotStatusClass"></p>

 

  

 

 

 

  

 

Angular filter output html

标签:

原文地址:http://www.cnblogs.com/sevenzhou/p/4882998.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!