Class name changing dynamically from JSON object in Angular.js

Question

I want to dynamically change a html class to an <li> element that I am getting over, but class name could not change. The code is here:

<div id="content">
    <ul id="container" ng-controller="ContainerController" ng-init="init()">
        <li ng-repeat="mainEvent in mainEvents" class="element home {{mainEvents.category}}" >
            <div ng-repeat="event in mainEvent.events">
            <a href="{{event.link}}" title="">
                <div class="images"><img ng-src="{{event.url}}"  alt=""/>

                    <div class="title">
                        <div class="title-wrap"><h3><span>{{event.title}}</span></h3></div>
                    </div>
                    <div class="subtitle">
                        <div class="subtitle-wrap"><p><span><span class="line-through">{{event.short_text}}</span></span>
                        </p></div>
                    </div>
                </div>
            </a>
            </div>
        </li>
    </ul>
</div>

Also my JSON object like this:

"main_events": [

    {
        "category": "poland",
        "header": "Kasım 2014",
        "events": [

            {
                "title": "Beyaz Peynir",
                "url": "images/pic05.jpg",
                "short_text": "40.00 TL ",

                "tags": [
                    {
                        "name": "beacon"
                    },
                    {
                        "name": "gps"
                    },
                    {
                        "name": "navigasyon"
                    }
                ],
                "link": "blog-post-ic-mekan-konum-belirleme-sistemi.html"
            }

        ]
    },

I want to change my html class name dynamically according to category value. However, I always see class name like class = "element home", but i want to see class="element home poland". I know I may do this for a boolean or another method, but I don't understand that problem. It should be worked I supposed. So, How can solve this problem ? Thank you.

Sravan · Accepted Answer · 2016-10-24 13:35:11Z

3

Since you are repeating mainEvent use {{mainEvent.category}} insteaed of {{mainEvents.category}}

Change class="element home {{mainEvents.category}}" to class="element home {{mainEvent.category}}"

Since {{mainEvents.category}} is an array, you cannot use this directly

<li ng-repeat="mainEvent in mainEvents" class="element home {{mainEvent.category}}" >

Also you can use the ng-class syntax:

There also you should take, mainEvent.category

 <li ng-repeat="mainEvent in mainEvents" class="element home"  ng-class="mainEvent.category" >

edited Oct 24, 2016 at 13:35

answered Oct 24, 2016 at 13:29

Sravan

18.7k3 gold badges33 silver badges54 bronze badges

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

5 Comments

Alper Guven Over a year ago

@Svravan i have tried this but i have seen again only class="element home " :(

Alper Guven Over a year ago

Now, i tried again with ng-class syntax, i saw this when i inspect on chrome: "<li ng-repeat="mainEvent in mainEvents" class="element home ng-scope" ng-class="mainEvent.category">" i don't understand

ram1993 Over a year ago

@AlperGuven make sure that mainEvent.category should not be undefined.

Sravan Over a year ago

I think the variable you have taken is main_events not mainEvents please check that

Sravan Over a year ago

@Alper Guven, have you checked the variable name?

Aks1357 · Accepted Answer · 2016-10-24 13:29:48Z

0

Change class to ng-class:

Snippet :

Change :

<li ng-repeat="mainEvent in mainEvents" class="element home {{mainEvents.category}}" >

This should also work, if you change class="element home {{mainEvent.category}}"

To:

<li ng-repeat="mainEvent in mainEvents" class="element home" ng-class="mainEvent.category">

edited Oct 24, 2016 at 13:29

answered Oct 24, 2016 at 13:23

Aks1357

1,0721 gold badge9 silver badges19 bronze badges

Collectives™ on Stack Overflow

Class name changing dynamically from JSON object in Angular.js

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related