我有一个表格,需要在其中显示许多问题和多个答案。我将 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";
}
}
我不知道你是否需要它,但我为这个确切的问题苦苦挣扎了两天,所以我将发布我发现的内容,因为它可以帮助其他人。
首先,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:我将代码翻译成英文,所以也许某些元素的名称可能错误,但重要的想法是如何进行迭代和绑定。
只需将其添加到 Thymeleaf 页面的 HTML 标签中 xmlns:th="http://www.thymeleaf.org"
你就可以走了:)