angularjs - 条件显示样式
问题描述
我有一个具有这种结构的项目列表:
items = [ {name:"name1",value:"value1",status:"new"},
{name:"name2",value:[new_val, prev_val],status:"changed"},
{name:"name3",value:"value3",status:"deleted"},...]
状态可以是:“新”、“已更改”或“已删除”。我需要做的是对项目列表进行 ng-repeat 并将它们显示如下:
- 如果
status === "new"
:以“绿色”显示名称 - 如果
status === "deleted"
:以“红色”显示名称并删除 - 如果
status === "changed"
:以黄色显示名称,第一个值以红色显示并划线,第二个以绿色显示(作为新值)
我的代码如下所示:
<tr ng-repeat="item in items">
<td ng-class="{'deleted-entry': item.status === 'deleted',
'changed-entry': item.status === 'changed',
'new-entry': item.status === 'new'}">
{{item.name}}
</td>
<td ng-if="another condition">
<i ng-if="item.status !== 'changed'">
{{item.value}}
</i>
<!-- <i ng-if="item.status === 'changed'" ng-class="changed-entry">{{item.value[0]}}{{item.value[1]}}</i> -->
</td>
</tr>
我不知道如何并排显示值,每个值都有不同的类样式status==="changed"
。
这是我的CSS类:
.deleted-entry {
text-decoration: line-through;
color: red;
}
.changed-entry {
color: yellow;
}
.new-entry {
color: green;
}
解决方案
推荐阅读
- r - 如何使用汇总命令平均一组列并排除 R 中的其他特定列?
- docker - 如何在 docker compose 中使用 docker image 指定环境变量
- android - 如何在应用程序的背景中添加模糊效果?
- c++ - Opencv没有匹配的函数调用FastFeatureDetector
- monitoring - 是否可以在 Grafana 中绘制比率趋势图?
- json - 将 JSON 键的值存储在 Bash 变量中
- python - Python - 使用 ajax 将选择列表中的选定项目发布到 Flask
- python - 当遇到 PDF 中的图像时,pyttsx3 和 PyPDF4 停止 PDF 的文本到语音转换
- javascript - MongoDb 在子文档上返回匹配结果和匹配结果
- flutter - 切换按钮颤动不起作用