类名从 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" >