基于属性设置样式，具有功能、效率

set style based on property with function, efficiency

本文关键字：功能 效率 样式 设置 于属性 属性      更新时间：2023-09-26

我有几个图标，这些图标描述了我的对象处于什么状态，它是打开的、关闭的、拒绝的等等。如果对象是"打开"的，那么我的"打开"图标应该有opacity 1，其余的应该有opacity 0.4。为了实现这一点，我有一个类似的功能：

$scope.setOpacity = function(status, icon){
    console.log(status,icon);
    if (status == icon){
        return 1;
    }else {
        return 0.4;
    }
};

从这样的角度来看，它被称为：

ng-style="{'opacity': setOpacity(editable.Status,'open')}"

当我使用$modal窗口打开一个对象时，我的console.log(status,icon);会运行三次，然后每次单击视图上的任何位置都会运行一次。据我所知，这是正常的，它会更新视图（因此，如果状态值发生变化，图标的不透明度也会发生变化）

这是一种有效的方法吗？如果不是，可以用另一种方法吗？

您可以创建两个类似的css类

.opacity-1 {
      opacity: 1;
 }

和

.opacity-0.4{
    opacity: 0.4;
 }

然后有条件地应用此类

<span ng-class="{'opacity-1': status == icon,
                 'opacity-0.4': status !== icon}">some icon</span>

即使你可以在不同的条件下添加更多这样的类

相关文章：