标签:
写一个页面,在显示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>
标签:
原文地址:http://www.cnblogs.com/sevenzhou/p/4882998.html