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}} 的<{1}}

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

由于class="element home {{mainEvent.category}}"是一个数组，因此无法直接使用

{{mainEvents.category}}

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

您还应该采取<li ng-repeat="mainEvent in mainEvents" class="element home {{mainEvent.category}}" >

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

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

2 个答案: