淘汰选项条件css

Knockout options conditional css

本文关键字：css 条件 选项 淘汰      更新时间：2023-09-26

我有一个对象的可观察数组

question = {
        ownerUserName: item.id,
        text: item.text,
        dataType: item.dataType,
        personalized: item.personalized,
        status: item.status,
        actionUserName: item.actionUserName
    }

和一个从数组中选择选项的select:

<select id="questId" style="width: 425px" data-bind="options: questionList, optionsText: 'text'">

如何在敲除的帮助下，我可以使，如果问题。个性化== "Y"颜色的文本将是绿色的?

你最好选择css绑定

根据您的需要快速调整文档的方法是

<div data-bind="text: personalized, css: personalizedStatus">
   Profit Information
</div>
<script type="text/javascript">
    question.personalizedStatus = ko.computed(function() {
        return this.personalized() == "Y" ? "green" : "red";
    }, question);
</script>
<style>
    .green {color:green;}
    .red{color:red;}
</style>

您可以使用foreach而不是通常的选项绑定。就像

<style>
   .highlighted{
      background-color: red;
   }
</style
<select id="questId" style="width: 425px" data-bind="foreach: questionList">
   <option data-bind="text: text, class: {highlighted: personalized == 'Y'}">
</select>

还可以设置data-bind="style:{color: value ?'green': null}"

这不是最好的选择(最好是设置新的类)，但这是可能的

相关文章：