Добавить конкретный класс в зависимости от строки JSON с угловым

Question

Я пытаюсь создать свою первую тему Wordpress с помощью AngularJS.

Для этого я использую WP API REST. Для создания моих страниц у меня есть гибкий контент (сборка с ACF), чтобы отображать разные модули. При создании модулей в одном посте, у меня есть этот выход JSON:

IMAGE OF ACF JSON OUTPUT FROM WP REST API

"modules": [{ 
    acf_fc_layout": "module_photo_texte", 
    "disposition": "text-photo", 
    "photo": {}, 
    "texte": "", 
    "": null, 
    "largeur_gauche": "50", 
    "largeur_droite": "50" 
    }, 
    { 
    "acf_fc_layout": "module_titre", 
    "titre": "Test de titre" 
    }, 
    ... 
] 

От этого JSON Я хотел бы иметь возможность добавить класс DIV моего модуля согласно acf_fc_layout и распоряжение поле (если она существует)

Поскольку я новичок в Угловой, пытаюсь что путь, но я определенно уверен, что это не правильный путь.

<div ng-repeat="modules in project.acf.modules"> 
    <section ng-if="modules.acf_fc_layout === 'module_photo_texte' && modules.disposition === 'text-photo'" ng-class="'text-photo photo-text-module'"> 
    </section> 
    <section ng-if="modules.acf_fc_layout === 'module_photo_texte' && modules.disposition === 'photo-text'" ng-class="'photo-text photo-text-module'"> 
    </section> 
    <section ng-if="modules.acf_fc_layout === 'module_titre'" ng-class="title-module"> 
    </section> 
</div> 

Я думаю, что нг-повтор будет в моем <section>, но в данном случае я не имею ни малейшего представления о Как я могу отобразить хорошие классы в своих атрибутах нг-класса. Может быть, мне нужно сделать это в Контроллере?

Спасибо за помощь, ребята

Damien

Answer 1

Таким образом, в вашем случае, вам необходимо добавить условия в вашей нг-класса:

<any ng-class="{'class1': condition1, 'class2': condition2}"></any> 

Так что ваш HTML может быть так:

<div ng-repeat="modules in project.acf.modules"> 
    <section ng-class="{'title-module': modules.acf_fc_layout === 'module_titre', 
         'photo-text photo-text-module': modules.acf_fc_layout === 'module_photo_texte' && modules.disposition === 'photo-text', 
         'text-photo photo-text-module': modules.acf_fc_layout === 'module_photo_texte' && modules.disposition === 'text-photo' }"></section> 
    </section> 
</div> 

EDIT:

, если вы хотите просто добавить динамические значения атрибутов, это может выглядеть так:

<div ng-repeat="modules in project.acf.modules"> 
    <section class="{{modules.acf_fc_layout}} {{modules.disposition}}"></section> 
    </section> 
</div>