Thymeleaf:从阵列中填充复选框

时间:2018-07-31 05:57:33

标签: spring-mvc enums thymeleaf

我有一个使用Thymeleaf进行模板制作的Spring MVC应用程序。我正在使用枚举来动态生成复选框。因此,如果我的枚举文件具有3个值,它将生成3个复选框:

我的枚举文件:

public enum Foods {

    PIZZA("Pizza"),
    PASTA("Pasta"),
    MAC_CHEESE("Mac and Cheese"),
    ICE_CREAM("Ice Cream"),
    BURGER("Burger"),

    private String type;

    Foods(String type) {
        this.type = type;
    }

    public String getType() {
        return this.type;
    }

}

这是我的复选框:

<label for="decision">What is your favorite food?</label>
<div id="decision" class="row" style="margin-top:1%;">
    <div class="col-md-4" th:each="option : ${T(in.app.model.enums.Foods).values()}">
        <div class="checkbox checkbox-custom checkbox-circle">
            <input name="decision" type="checkbox" th:id="${option.toString()}" th:value="${option}" />
            <label th:for="${option.toString()}" th:text="${option.type}"></label>
        </div>
    </div>
</div>

此代码将为每种食物类型生成5个复选框。直到这里所有的作品。我面临的问题是在读取保存的记录时如何设置选中的属性。

我正在通过模型视图控制器取回对象。该对象具有食物属性,其值作为所选食物类型的数组。

user = {
   .
   .
   food : ["PIZZA", "BURGER", "PASTA"],
   .
   .
}

现在,我想遍历此数组,如果值匹配,请设置复选框。

我正在尝试做这样的事情:

<label for="decision">What is your favorite food?</label>
<div id="decision" class="row" style="margin-top:1%;">
    <div class="col-md-4" th:each="option : ${T(in.app.model.enums.Foods).values()}">
        <div class="checkbox checkbox-custom checkbox-circle">
            <input 
                name="decision" 
                type="checkbox" 
                th:id="${option.toString()}" 
                th:value="${option}" 
                th:each="food : ${user.food}"
                th:attr="checked = ${food} == ${option} ? 'checked'"
            />
            <label th:for="${option.toString()}" th:text="${option.type}"></label>
        </div>
    </div>
</div>

我知道它的错误(因为它不起作用),但是我无法弄清楚如何遍历两个数组以显示复选框并进行检查。

任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

如果可以的话,您可能想尝试使用th:checked代替th:attr,所以:

th:checked="${food == option.type}"

This帖子可能对您有所帮助。如果您不能使用th:checked,也可以切换到以下语句。

th:attr="checked=${food == option.type} ? 'checked'" 

由于比较时区分大小写,您似乎也可能在检查此数据时遇到一些问题,在这种情况下,this帖子可能会有所帮助。