AngularJS/HAML：如果属性为true，则添加CSS类

我负责定制ItemSelector指令的元素，ItemSelector的数据来自rails服务器

以下是haml代码：

.directive-items-selector{ ng_click: "openItemsSelector( $event )" }
  .wrapper
    %ui_select.ui-select{ ng: { model:  "input.model", disabled: "disabled",
                                change: "itemSelectModelChanged()" },
                        search_enabled: "{{ options.searchable }}" }

      %ui_select_match.ui-select-match{ items_selector_match: '',
                                        placeholder: "{{ input.placeholder }}",
                                        allow_clear: "{{ options.clearable }}",
                                        title:       "{{ $select.selected.label }}"                                        }
        %i.fa{ ng_class: 'icon' }

        {{ $select.selected.label }}

        %i.archived.fa.fa-archive{ ng_if: '$select.selected.object.is_archived' }

          %span.archived{ translate: 'archived.yes' }
      %ui_select_choices.ui-select-choices{ repeat:  "item.id as item in input.filteredItems track by item.id",
                                            refresh: "reloadItems( $select.search )",
                                            refresh_delay: '{{ input.filterDelay }}' }
        .item{ ng_attr_title: "{{ ::item.label }}" }
          .item-label {{ ::item.label }}
          %small.item-details {{ ::item.details }}

    .items-selector-actions
      %a.pointer.action{ ng: { if: 'linkToModal', click: 'openDetails()', disabled: "!model"  }}
        {{ 'btn.details' | translate }}
        %a.pointer.action{ ng: { if: 'createButton && klassName && !disabled', click: 'createItem()' }}
          {{ 'btn.new' | translate }}

我测试所选对象是否通过以下方式存档：

$select.selected.object.U已存档

现在，我正在添加一个图标和一个小文本，告诉用户所选对象已存档，我要做的是更改并添加 文本装饰：红色线条就是这样：

---

如何添加css类取决于$select.selected.object.is_存档值

Ng类接受对象，其中键是类，值是条件，何时应用：

ng-class="{'desiredClass': $select.selected.object.is_archived}"

或者另一种解决方案是使用三元运算符：

ng-class="$select.selected.object.is_archived ? 'desiredClass' : ''"

在HAML中，通过各种用法：

%div{'ng-class'：“{'desiredClass'：条件===true}

%div{'ng_class'：“{'desiredClass'：条件===true}

%div{'ng'：{'class'：“{'desiredClass'：条件===true}}}

下面是工作代码笔示例：

---

你可以使用

ng class

或

ng style

有条件地应用样式。我知道，但我没有找到正确的方法使用ng_class！你能帮忙吗！Ng类可以这样使用

Ng class=“{'desiredClass'：$select.selected.object.is\u archived}”

。或者另一个解决方案是

ng class=“$select.selected.object.u存档了吗？'desiredClass'：”

@m.belica为什么要将您的答案作为注释发布？抱歉，我会将其添加为回答谢谢@m.belica，事实上我了解这一点，但由于我使用的自定义语法，我无法将其插入正确的位置并以写入方式插入（ng_类）您是否尝试添加语法为

{ng:{class:{desiredClass:$select.selected.object.is_archive}}}

？是的，我尝试将其放入ui_select和ui_select匹配中，但不起作用。嗨，您是否能够在haml中添加ng类？如果成功，请共享代码？