Adding additional class with ng-class

Question

I used yeoman angular generator to scaffold my app, and now I'm working on a specific view.

I'm building a simple ng-repeat function, in order to clean up my html and avoid repeating the same markup 4 times.

I am making content panels, and want to add a class specific to the content, so I can style it with Sass. I tried using ng-class but so far I've been unable to make it work.

I am new to AngularJS, I tried reading the official ng-class documentation and this writeup but so far I'm unable to make it work. I guess it just takes a while to get used to Angular.

here's my view:

<div data-ng-controller="LandingController">
    <div ng-repeat="panel in panels">
        <div class="panel-heading">
            {{ panel.title }}
        </div>
        <div class="panel-content" ng-class="{{panel.contentClass}}" data-ng-bind-html="panel.content">
        </div>
    </div>
</div>

and the controller:

'use strict';

angular.module('angularApp')
    .controller('LandingController', function ($scope) {
        $scope.panels = [
            {
                title: 'lokacija',
                contentClass: 'location',
                content:'<p>Institut Jožef Stefan<br>Jamova 30<br>1000 Ljubljana</p><br><div class="map-container"></div>'
            },
            {
                title: 'kontakt',
                contentClass: 'location',
                content: ''
            },
            {
                title: 'delovni čas',
                contentClass: 'location',
                content: ''
            },
            {
                title: 'katalog',
                contentClass: 'location',
                content: ''
            }
        ];
    });

Kalhan · Accepted Answer · 2015-07-06 10:17:48Z

4

ng-class operates in three different ways, depending on which of three types the expression evaluates to:

If the expression evaluates to a string, the string should be one or more space-delimited class names. (this will match with your case)
If the expression evaluates to an object, then for each key-value pair of the object with a truthy value the corresponding key is used as a class name.(EX: 'ng-class="{'my-class': (true/false expression)}")
If the expression evaluates to an array, each element of the array should either be a string as in type 1 or an object as in type 2. This means that you can mix strings and objects together in an array to give you more control over what CSS classes appear. See the code below for an example of this. (EX: ng-class="[style1, style2, style3]") refer ng-class doc and you will get more info.

so you can directly use ng-class="panel.contentClass" this will match with the first list item witch is If the expression evaluates to a string, the string should be one or more space-delimited class names..

you can simply change ng-class="{{panel.contentClass}}" to ng-class="panel.contentClass" because ng-class accepts a expression not a interpolated value.

<div class="panel-content" ng-class="panel.contentClass" data-ng-bind-html="panel.content">

DEMO

edited Jul 6, 2015 at 10:17

answered Jul 6, 2015 at 10:12

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

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

5 Comments

Miha Šušteršič Over a year ago

For some reason the inspector shows it as ng-class instead of the regular class. This was the first thing I tried, but apparently I nested some of my css wrong, and it didn't work

Kalhan Over a year ago

regular class will add to the class :)

Miha Šušteršič Over a year ago

rechecked, nesting was right but still won't work. If I target the new class directly it works, but if I nest it under .panel content like this .panel-content .location { text-align: center; font-size: 1.2em; } it brakes. Any idea why?

Kalhan Over a year ago

ah this is the issue ng-class is applied to the div and that div also have panel-content class, so both classes add to the same element, so you need to change your css to match it as, .panel-content.location {...} no spaces between .panel-content and .location. I think you know the differences with and without spaces between .panel-content and .location.

Kalhan Over a year ago

try this, .panel-content { &.location {text-align: center; font-size: 1.2em;} }

Community · Accepted Answer · 2017-05-23 11:51:18Z

1

You are using ng-class in wrong way. ng-class is use to add/remove class conditionally and dynamically.

Here is full documentation of ng-class.

ng-class requires json in which key is class name and value is condition. if value satisfies, it add that class else not.

for Ex.

<div class="panel-content" ng-class="{'my-class':panel.contentClass}" data-ng-bind-html="panel.content">

it adds my-class if value of panel.contentClass is true.

if you are taking class name from panel.contentClass then better way to use class attribute only instead of ng-class. Here is reference.

For ex.

<div class="panel-content, {{panel.contentClass}}" data-ng-bind-html="panel.content">

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Jul 6, 2015 at 10:00

Laxmikant Dange

7,7386 gold badges43 silver badges67 bronze badges

4 Comments

Vineet Over a year ago

I suppose if you will not provide any conditions, it will apply that class on that element, permanentely

Laxmikant Dange Over a year ago

what do you mean if you not provide any condition? this is simply same as using class attribute.

Laxmikant Dange Over a year ago

@Vineet, I updated my answer, I hope you got what you are looking for.

Miha Šušteršič Over a year ago

The second part of your anwser is what I was looking for, without the separator in the class definition (,). Thanks for writing it up in a way that's easy to understand, and explaining why ng-class is not the corret choice

Collectives™ on Stack Overflow

Adding additional class with ng-class

2 Answers 2

5 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related