我可以为单个元素添加样式和 ng-style 吗？

Posted 2023-03-06

【中文标题】我可以为单个元素添加样式和 ng-style 吗？

【英文标题】：Can I add style and ng-style both for a single element?

【发布时间】：2019-06-21 06:23:16

【问题描述】：

我正在为两个不工作的不同操作设置单个元素的样式和 ng-style。

如果我将两者加在一起，它就不起作用。两者分开工作

<div class="glyphicon glyphicon-heart" style="width:wide%;"  ng-style="'color': (istrue()) ? 'red' : 'yellow' "></div>

JS

$scope.wide = 50; // dynamic value
$scope.istrue = function () 
     var abc = true;
        if (abc) 
            return true;
        
        else 
            return false;
        
     

【问题讨论】：

如果您查看开发者工具，<div class="glyphicon glyphicon-heart" style="width:wide | l10n : 'number' %;" ng-style="'float': (isArrabic()) ? 'right' : 'none' "></div> 解析为什么？

当我同时添加...

你可以在这里添加一个最小的代码sn-p，以便我们可以检查它是否被复制

最小码sn-p???

【参考方案1】：

您还可以通过添加动态类名来应用样式，如下所示：

html

<div class="glyphicon glyphicon-heart" style="width:78%;" ng-class="isArrabic()"></div>

JS

$scope.wide = 78; // dynamic value
$scope.isArrabic = function () 
     var arabic = true;
        if (arabic) 
            return 'floatRight';
        
        else 
            return 'floatLeft';
        
     

CSS：

.floatRight 
  float: right; 
  color: red;


.floatLeft 
  float: left;
  color: blue;

【讨论】：

我需要为不同的风格使用这个isArrabic() 条件。所以我返回true 或flase