Add CSS class using angular

Question

I have the following on Angular controller scope model:

$scope.model = {
  subscriber: { email: '', name: '' },
  notice: { text: '', type: '' }
}

I need to display a P tag whenever notice.text is not empty and add a CSS class equal to notice.type. So I have:

<p class="notice" data-ng-bind="model.notice.text" data-ng-if="model.notice.text != ''"></p>

P tag has always the class "notice". But I need to add the class contained in $scope.model.type if it is defined.

How can I do this?

Side question: Is there a better way to show / hide the P tag instead of using data-ng-if?

You could consider ng-show instead of ng-if, but make sure to read about the difference stackoverflow.com/questions/21869283/… — Sandeep Nayak
– Sandeep Nayak, Commented Apr 22, 2015 at 16:21

Satpal · Accepted Answer · 2015-04-22 16:19:59Z

2

You can use ngClass directive

The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.

Code

ng-class="model.notice.text != '' ? model.notice.type : ''"

answered Apr 22, 2015 at 16:19

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

1 Comment

Miguel Moura Over a year ago

I was considering that ... so i can have class="notice" and for the type use ng-class? I tought I would need ng-class for both so that was my problem ...

Collectives™ on Stack Overflow

Add CSS class using angular

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related