AngularJS / HAML : Add CSS class if property is true

Question

I work in customizing element of an ItemSelector directive, data of ItemSelector coming from rails server.

here is the haml code :

.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 }}

I test if the object selected is archived or not by :

$select.selected.object.is_archived

for now I'm adding an icon and a small text to tell user that this object selected is archived, what what I want is to change that and add text-decoration: line-through red; to be like that :

how to add css class depend on $select.selected.object.is_archived value

You can use ng-class or ng-style to apply styles conditionally — belicam
– belicam, Commented Jun 14, 2018 at 8:47
yes I know that but I didn't find the right way to use ng_class! can you help ! — user9569059
– user9569059, Commented Jun 14, 2018 at 8:49
Ng-class can be used like this ng-class="{'desiredClass': $select.selected.object.is_archived}". Or another solution is ng-class="$select.selected.object.is_archived ? 'desiredClass' : ''" — belicam
– belicam, Commented Jun 14, 2018 at 8:53

belicam · Accepted Answer · 2018-06-14 11:39:06Z

1

Ng-class accepts object, where key is your class and value is condition, when it is to be applied:

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

Or another solution is using ternary operator:

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

In HAML, via various usages:

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

Here working codepen example: https://codepen.io/anon/pen/pKreGv?editors=1010

edited Jun 14, 2018 at 11:39

answered Jun 14, 2018 at 9:02

belicam

8427 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user9569059 Over a year ago

Thanks @m.belica, actually I understand that but i cannot inject it on the right place and with the write way because of the customizing syntax I work with (ng_class)

belicam Over a year ago

Did you try adding ng class with syntax {ng: { class:"{'desiredClass': $select.selected.object.is_archived}" }}?

user9569059 Over a year ago

yes I tried put it in ui_select and ui_select_match but it didn't work

Malik Over a year ago

hi, were you able to add ng-class in haml ? if you were successful doing so , can you share the code please. ?

Collectives™ on Stack Overflow

AngularJS / HAML : Add CSS class if property is true

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related