如何根据视图中返回的内容更改颜色?

时间:2018-05-18 23:11:33

标签: css angularjs html5 sass

我有一个div,它返回不同的状态,如下所示:

  • 已售出
  • 按需提供
  • 未付款
  • 逾期
  • 付费

我想使用sass或css为每个状态设置不同的颜色,

这是我尝试使用sass:

在HTML视图中:

public class Tbcompany {

    private String companycode;
    private String companycode;
    private String companyname;

    public String setCompanycode(String companycode) {
        this.companycode = companycode;
    }

    // create the constructor, getters and setters
}

在样式表中:

<div class="badge">
    {{store.status | translate | uppercase}}
</div>

这不起作用。有人可以帮助我找到最好的方法吗?

注意:动态返回状态。

3 个答案:

答案 0 :(得分:1)

SASS并不像那样。您需要在徽章中添加一个类才能使其正常工作。像这样:

<div class="badge {{store.status}}">
    {{store.status | translate | uppercase}}
</div>

萨斯:

.badge {
    .notpaid {
        color: yellow;
    }
}

答案 1 :(得分:1)

我认为你可以做到这一点。

<div class="badge {{store.status}}">
    {{store.status | translate | uppercase}}
</div>

在SASS中有:

.badge{
   &.sold{
      background-color: red;
   }
   &.notpaid{
      background-color: green;
   }
   &.paid{
      background-color: blue,
   }
}

无法获取Sass文件中的值。

实施例: http://jsfiddle.net/0cm19uec/

答案 2 :(得分:1)

我会做这样的事情。

<强> SCSS

print("this is two",2).

<强> HTML

$statuses: (
  sold: red,
  paid: green,
  notpaid: yellow,
  demand: blue
);

.badge {
  color: black;

  @each $name, $value in $statuses {
    &--#{$name} {
      color: $value;
    }
  }
}

如果您需要更改课程,添加新课程,更改颜色等,它更容易维护。这一切都在 $ statuses 地图中完成。