从Angular.js中的JSON对象动态更改类名

Question

我想将html类动态更改为我要克服的<li>元素，但是类名称无法更改。 代码在这里：

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

还有我的JSON对象，像这样：

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

        ]
    },

我想根据类别值动态更改我的html类名称。 但是，我总是看到类名，例如class = "element home" ，但是我想看到class="element home poland" 。 我知道我可以使用布尔值或其他方法来执行此操作，但我不了解该问题。 我认为应该可以的。 那么，如何解决这个问题呢？ 谢谢。

Answer 1

由于您要重复mainEvent使用{{mainEvent.category}}的{{mainEvents.category}}

将class="element home {{mainEvents.category}}"更改为class="element home {{mainEvent.category}}"

由于{{mainEvents.category}}是一个数组，因此您不能直接使用它

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

您也可以使用ng-class语法：

还应该带mainEvent.category

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

Answer 2

将class更改为ng-class ：

片段：

变更：

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

如果您更改class="element home {{mainEvent.category}}" ，这也应该起作用

至：

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