Question

我编写了一个ng-grid，其中单元格背景根据单元格数据改变颜色。这是为我工作的

cellTemplate: '<div title="{{row.entity.EHStatus.SFT.desc}}" class="ngCellText"'+ 
                                    'ng-class="{\'green\' : row.getProperty(\'EHStatus.SFT.code\') == \'1\' ,\'orange\' : row.getProperty(\'EHStatus.SFT.code\') > \'1\',\'red\' : row.getProperty(\'EHStatus.SFT.code\') == \'0\',\'yellow\' : row.getProperty(\'EHStatus.SFT.code\') < \'0\'}" >&nbsp;</div>'}

现在我正在尝试更改上面的代码，以便根据状态使用不同的bootstrap glyphicon。这是我的尝试。

cellTemplate: '<div  style="text-align:center;" title="{{row.entity.EHStatus.TOPPER.desc}}" class="ngCellText"'+ 
                                    'ng-class="{"glyphicon glyphicon-ok-circle" style="color:green;" : row.getProperty(\'EHStatus.TOPPER.code\') == \'1\' ,...

我的风格低于其中一个。但显然我更改glyphicon的语法不对，有人可以帮忙吗？

.green {
    background-color: green;
    color: green;
} ...

Answer 1

如果您的类在css类名称中包含破折号，则必须在其周围加上引号。实施例）

<div ng-class={glyphicon 'glyphicon-ok': myBooleanStatement}></div>

Answer 2

你可以试试这种方式

<span class="glyphicon green" ng-class="{'glyphicon-ok': {{single_request.status}}==1, 'glyphicon-remove': {{single_request.status}}==0 }" ></span>

{{single_request.status}} =角度状态变量

Answer 3

它正在运作，你应该试试这个;

<span class="{{item.Status==true ? 'glyphicon glyphicon-ok':'glyphicon glyphicon-remove'}}" aria-hidden="true"></span>

根据状态更改bootstrap glyphicon

3 个答案: