Question

我有几个图标，这些图标描述了我的对象所处的状态，是否打开，关闭，拒绝等等。如果对象是“打开”，那么“打开”的图标应该为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);会运行三次，然后每次我点击视图上的任意位置一次。据我所知这是正常的，它会更新视图（所以如果状态的值要改变，那么图标的不透明度也会改变）

这是否是一种有效的方法，如果没有，是否可以采取其他方式？

Answer 1

你可以创建两个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>

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

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

1 个答案: