Блог

Главная - Вопросы по программированию - Имя класса, динамически изменяющееся из объекта JSON в Angular.js

Имя класса, динамически изменяющееся из объекта JSON в Angular.js

#javascript #jquery #html #angularjs #json

#javascript #jquery #HTML #angularjs #json

Вопрос:

Я хочу динамически изменить класс 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" . Я знаю, что могу сделать это для логического или другого метода, но я не понимаю этой проблемы. Я предполагал, что это должно сработать. Итак, как можно решить эту проблему? Спасибо.

Ответ №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" >

Комментарии:

1. @Svravan я пробовал это, но я снова увидел только class =»element home» 🙁

2. Теперь я попробовал еще раз с синтаксисом ng-class, я увидел это при проверке в chrome: «<li ng-repeat=»mainEvent в mainEvents» class=»элемент home ng-scope» ng-class=»mainEvent.category»>» я не понимаю

3. @AlperGuven убедитесь, что этого mainEvent.category не должно быть undefined .

4. Я думаю, что выбранная вами переменная main_events не mainEvents , пожалуйста, проверьте это

5. @Alper Guven, ты проверил имя переменной?

Ответ №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">