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 http://stackoverflow.com/questions/21869283/when-to-favor-ng-if-vs-ng-show-ng-hide — Sandeep Nayak, Apr 22 '15 at 16:21

score 2 · Answer 1 · answered Apr 22 '15 at 16:19

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 '15 at 16:19

Satpal

132,252
13
159
168

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 ... – Miguel Moura Apr 22 '15 at 16:24

Add CSS class using angular

1 Answers1