AngularJS / HAML: добавить класс 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.is_archived

на данный момент я добавляю значок и небольшой текст, чтобы сообщить пользователю, что этот выбранный объект заархивирован, я хочу изменить это и добавить оформление текста: сквозное красное; быть таким: AngularJS / HAML: добавить класс CSS, если свойство истинно

как добавить класс css зависит от значения $ select.selected.object.is_archived

Вы можете использовать ng-class или ng-style для условного применения стилей.

— 14.06.2018 10:47

да, я знаю это, но я не нашел правильного способа использовать ng_class! вы можете помочь !

— 14.06.2018 10:49

Ng-class можно использовать как этот ng-class = "{'desiredClass': $select.selected.object.is_archived}". Или другое решение - ng-class = "$select.selected.object.is_archived ? 'desiredClass' : ''"

— 14.06.2018 10:53

@ m.belica, почему вы публикуете свой ответ в виде комментария?

— 14.06.2018 11:00

Извини добавлю как ответ

— 14.06.2018 11:01

stackoverflow.com/questions/36936242/conditional-ng-class

— 14.06.2018 13:32

angularjs angularjs-directive haml ng-class itemselector

14.06.2018 10:43

Знаете ли вы, что директивы являются одной из самых мощных и универсальных функций Angular?

Директивы позволяют расширять HTML новыми элементами и атрибутами и даже создавать собственные структурные директивы для манипулирования DOM. С...

Разница между Angular и React

React и AngularJS - это два самых популярных фреймворка для веб-разработки. Оба фреймворка имеют свои уникальные особенности и преимущества, которые...

211

Ответы 1

Ng-class принимает объект, где ключ - это ваш класс, а значение - это условие, когда он должен применяться:

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

Или другое решение использует тернарный оператор:

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

В HAML с помощью различных способов использования:

%div{'ng-class': "{'desiredClass': condition === true}"}
%div{'ng_class': "{'desiredClass': condition === true}"}
%div{'ng': {'class': "{'desiredClass': condition === true}"}}

Вот рабочий пример кода: https://codepen.io/anon/pen/pKreGv?editors=1010

Спасибо @ m.belica, на самом деле я это понимаю, но я не могу ввести его в нужное место и с помощью способа записи из-за настраиваемого синтаксиса, с которым я работаю (ng_class)

— 14.06.2018 12:28

Вы пробовали добавить класс ng с синтаксисом {ng: { class:"{'desiredClass': $select.selected.object.is_archived}" }}?

— 14.06.2018 12:45

да, я пробовал поместить его в ui_select и ui_select_match, но это не сработало

— 14.06.2018 12:53

привет, удалось ли вам добавить ng-class в haml? Если вам это удалось, поделитесь кодом, пожалуйста. ?

— 13.03.2019 10:16

14.06.2018 11:02