在 thymeleaf 中设置 th:field 属性正在替换 name 属性

问题描述 投票:0回答:2

我有一个表格,需要在其中显示许多问题和多个答案。我将 Spring Boot 与 Thymeleaf 结合使用,并循环显示问题标签和用于多种选择的单选按钮的列表。当我设置:字段属性来捕获用户输入时,它会替换所有单选按钮的名称属性。在这种情况下,我只能为所有问题选择一个单选按钮。我复制了它看起来像是百里香库中的一个错误。有人可以建议面对同样的事情吗?

我创建了一个示例应用程序。 Repo 是在 github 上创建的。

https://github.com/ashokruhela/thymeleaf-radio.git

html

<!DOCTYPE html>
<html lang="en" xmlns:th="http:www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Contest</title>
</head>
<body>
    <h1>contest questions</h1>
    <form action="@{/result}" th:object="${contest}">
        <div th:each="ques,qs: ${contest.questions}">
            <label th:text="${ques.title}"></label>
            <div th:each="option,os:${ques.options}">
                <input type="radio"
                       th:field="*{ques.answer}"
                       th:name="${'question'+qs.count}"
                       th:id="${'Q'+qs.count+'opt'+os.count}"
                       th:value="${option.descpription}" />
            </div>

        </div>
    </form>
</body>
</html>

比赛

package com.ak.learning.hibernatemapping;
import java.util.List;

public class Contest {
    String name;
    List<ContestQuestion> questions;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public List<ContestQuestion> getQuestions() {
        return questions;
    }

    public void setQuestions(List<ContestQuestion> questions) {
        this.questions = questions;
    }
}

问题

package com.ak.learning.hibernatemapping;
import java.util.List;

public class ContestQuestion {
    String title;
    String answer;

    List<QuestionOption> options;

    public String getAnswer() {
        return answer;
    }

    public void setAnswer(String answer) {
        this.answer = answer;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public List<QuestionOption> getOptions() {
        return options;
    }

    public void setOptions(List<QuestionOption> options) {
        this.options = options;
    }
}

选项

package com.ak.learning.hibernatemapping;

public class QuestionOption {
    String description;

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }
}

控制器

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class ContestController {
    @GetMapping("/contest")
    public String contest(Model model){

        Contest contest = new Contest();
        //adding the questions is ommitted.....
        model.addAttribute("contest", contest);
        return "contest";
    }
}
spring-boot radio-button thymeleaf
2个回答
0
投票

我不知道你是否需要它,但我为这个确切的问题苦苦挣扎了两天,所以我将发布我发现的内容,因为它可以帮助其他人。

首先,th:field 覆盖 name 和 id 值。因此,要使每组问题具有单独的单选属性名称,您需要两次迭代:一次针对问题,一次针对每个选项。这里的大问题是如何将所选选项绑定到 th:field。

您需要知道该字段将以字符串格式接收选择的“值”属性,因此我在这里所做的是向我的问题模型添加“字符串选择选项”属性。最后,就我而言,我有一个像这样的 html:

<fieldset th:each="question, count: ${questions.questions}">
                
                <label th:text="${question.text}"></label>
                
                <ul >
                    <li th:each="option : ${question.options}">
                        
                        <input th:value="${option.title}" th:field="*{questionObject[__${count.index}__].optionChosen}" type="radio"/>
                        <label th:text="${option.text}"></label> 
                    </li>
                </ul>
                
            </fieldset>

这里考虑两件事很重要:迭代 QuestionObject 选项列表的计数器,以便 Spring 可以正确地将答案绑定到列表中。我为问题和选项模型创建了一个标题属性,以便更容易放入输入属性中

PS:我将代码翻译成英文,所以也许某些元素的名称可能错误,但重要的想法是如何进行迭代和绑定。


-1
投票

只需将其添加到 Thymeleaf 页面的 HTML 标签中 xmlns:th="http://www.thymeleaf.org"

你就可以走了:)

© www.soinside.com 2019 - 2024. All rights reserved.