CODEWITHSUNDEEP
htmlangularjs
Miha Šušteršič
Miha Šušteršič

Reputation: 10062

Adding additional class with ng-class

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: ''
            }
        ];
    });

Upvotes: 0

Views: 7191

Answers (2)

Kalhan.Toress
Kalhan.Toress

Reputation: 21901

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

  1. If the expression evaluates to a string, the string should be one or more space-delimited class names. (this will match with your case)

  2. 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)}")

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

Upvotes: 4

Laxmikant Dange
Laxmikant Dange

Reputation: 7698

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">

Upvotes: 1

Related Questions