web-dev-qa-db-fra.com

Comment créer un menu déroulant avec une liste utilisant thymeleaf et spring

Je dois remplir un menu déroulant avec toutes les valeurs d'une liste de chaînes.

Classe de contrôleur

@RequestMapping(value = "/generateIds", method = RequestMethod.GET)
public String launchPage(Model model) {
    List<Municipality> municipalities = rCountryService.finaAllMunicipalities();
    //assume the list is populated with values
    List<String> countryName = new ArrayList<String>();
    for(int i=0; i<municipalities.size(); i++) {
        countryName.add(municipalities.get(i).getCountry().toString());
    }
    model.addAttribute("countryName ", countryName );

    return "generateIds";
}

Je ne savais pas par où commencer pour le code HTML, j'ai donc commencé par cette

<select th:field="*{countryName }">
    <option value="default">Select a country</option>
    <option th:each="${countryName }" th:value="${countryName }"th:text="${countryName }"/>
</select>

À quoi devrait ressembler mon code HTML/contrôleur pour ajouter tous les éléments de la liste sous forme d'options déroulantes?

Merci d'avance!

javahtmlspringthymeleaf
12
Roman Paolucci

C’est ainsi que je remplis la liste déroulante. Je pense que cela peut vous aider à avoir une idée à ce sujet.

Manette

List<Operator> operators =  operatorService.getAllOperaors()
model.addAttribute("operators", operators);

Modèle

  @Entity
  @Table(name = "operator")
  public class Operator {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "id")
    @JsonIgnore
    private Long id;

    @NotBlank(message="operator Name cannot be empty")
    @Column(name = "operator_name", nullable = false)
    private String operatorName;

    getters and setters ...

}

Vue

<div class="form-group blu-margin">
    <select class="form-control" th:field="${operator.opeId}"  id="dropOperator">
    <option value="0">select operator</option>
    <option th:each="operator : ${operators}" th:value="${operator.id}" th:text="${operator.operatorName}"></option>
    </select>
</div>
16
Hasitha Diluka

D'abord merci à votre question et à votre réponse! J'ai fini avec cette solution.

Mon modele

@Entity
@Table(name = "test")
public class Test {

    @Id
    private String testCode;
    private String testName;
    private int price;

    public Test() {}

    public Test(String testCode, String testName, int price) {
        this.testCode = testCode;
        this.testName = testName;
        this.price = price;
    }

    public String getTestCode() {
        return testCode;
    }

    public String getTestName() {
        return testName;
    }

    public int getPrice() {
        return price;
    }
}

Mon avis

    List<Test> test = new ArrayList<>();
    model.addAttribute("test", test);
    List<Test> tests = testRepository.findAll();
    model.addAttribute("tests", tests);

Mon HTML

<div class="col-lg-3" th:object="${test}">
    <select class="form-control" id="testOrder" name="testOrder">
        <option value="">Select Test Order</option>
        <option th:each="test : ${tests}"
                th:value="${test.testCode}"
                th:text="${test.testCode}+' : '+${test.testName}"></option>
    </select>
</div>

Mon résultat

Image - menu déroulant tymeleaf du modèle

8
Thanongsak Chamung

Vous avez seulement besoin de ce code dans votre vue.

List<Test> tests = testRepository.findAll();
model.addAttribute("tests", tests);
0
Leemarshn