Question

我正在尝试使用AngularJS构建我的第一个wordpress主题。

为此，我使用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，我希望能够根据 acf_fc_layout 和处置字段（如果存在）将类添加到我的模块的div中

因为我是Angular的新手，我试着这样做，但我确信这不是正确的方法。

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

我认为ng-repeat会在我的<section>中，但在这种情况下，我不知道如何在ng-class属性中显示好的类。也许我必须在控制器中执行此操作？

感谢帮助人员

达明

Answer 1

因此，在您的情况下，您需要在ng-class中添加条件：

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

所以你的HTML可能是这样的：

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

编辑：

如果您只想添加属性的动态值，可能是这样的：

payee.coffee

使用Angular根据JSON字符串添加特定的类

1 个答案: