CODEWITHSUNDEEP
javascriptjqueryhtmlangularjsjson
Alper Guven
Alper Guven

Reputation: 81

Class name changing dynamically from JSON object in Angular.js

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.

Upvotes: 0

Views: 1195

Answers (2)

Sravan
Sravan

Reputation: 18647

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

Upvotes: 3

Aks1357
Aks1357

Reputation: 1072

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

Upvotes: 0

Related Questions