Как я могу изменить класс значков на основе значения поля

Question

Как я могу изменить класс значков на основе значения поля? У меня есть имя поля с именем flag, это поле содержит два значения On и Off.

Как я могу изменить класс значка в зависимости от значения:

Когда флаг = «Вкл.» Показать этот значок fa-check-circle зеленый Когда флаг выключен, показать k-i-close-outline

<ul id="treeview" >
     @foreach (var item in rpInfo)
         {
          <li data-expanded="true" class="panel-handler" data-id="@item.ID">
              <i class="far fa-check-circle" data-id="@item.Flag" style="padding-right: 10px;"></i>@item.CompanyName
                 <ul>
                    <li data-expanded="true">  
                     <i class="far fa-check-circle"></i>@item.flag @item.ContactName 
                   </li>
                 </ul>
               </li>
          }
    </ul>

Чтобы было проще, я добавил data-id, как и в браузере выглядит так <i class="far fa-check-circle" data-id="Off" style="padding-right: 10px;"></i>.

может быть, если это поможет

Спасибо!

Answer 1

Мне трудно понять, что вы делаете и что вам нужно, но, похоже, вам нужно простое if утверждение .

Может быть, что-то в этом роде?

    <ul id="treeview" >
         @foreach (var item in rpInfo)
             {
             var flag = @item.Flag;
            if (flag = 'On') { '
              <li data-expanded="true" class="panel-handler" data-id="@item.ID">
                  <i class="far fa-check-circle" data-id="@item.Flag" style="padding-right: 10px;"></i>@item.CompanyName
                     <ul>
                        <li data-expanded="true">  
                         <i class="far fa-check-circle"></i>@item.flag @item.ContactName 
                       </li>
                     </ul>
                   </li>
         '} else{ '
              <li data-expanded="true" class="panel-handler" data-id="@item.ID">
                  <i class="k-icon k-i-close-outline" data-id="@item.Flag" style="padding-right: 10px;"></i>@item.CompanyName
                     <ul>
                        <li data-expanded="true">  
                         <i class="k-icon k-i-close-outline"></i>@item.flag @item.ContactName 
                       </li>
                     </ul>
                   </li>
               '}
};
        </ul>