简体   繁体   中英

Iterating a div with Thymeleaf + SpringMVC

I'm trying to iterate a List with divs but it only repeat once. I think it's a html(thyemeleaf) code mistake, but I can't find it. I have another iteration working like that, but instead of div's it's using tr and td.

Maybe it doesn't work with div's?

HTML Code

                <div id="portfoliolist" th:each="produto : ${estoque}">
                    <div class="portfolio usado escambolivre" data-cat="usado escambolivre">
                        <div class="portfolio-wrapper"> 
                        <a rel="group" title=""  th:href="'/produto?id='+${produto.id}">
                            <img th:src="'images/'+${produto.id}+'.jpg'" alt=""  class="img-responsive caixa-img-produto" />
                        </a>
                            <div class="label">
                                <div class="label-text">
                                    <span class="text-category" th:text="${produto.nome}"></span>
                                </div>
                                <div class="label-bg"></div>
                            </div>
                        </div>
                    </div>
                </div>

Controller Code

@Autowired
Estoque produtos;
@RequestMapping("/produtos")
    public String buscar(Model model){
        model.addAttribute("estoque", produtos.getProdutos());
        System.out.println(produtos.getProdutos());

        return "produtos";
    }

Service Code

@Service
public class Estoque {

    private static List<Produto> produtos = new ArrayList<>();

    static {
        produtos.add(new Produto(new BigInteger("1"), "Nike Shox", new BigDecimal("500.00"), "Modelo v3"));
        produtos.add(new Produto(new BigInteger("2"), "Conta de LoL", new BigDecimal("300.00"), "Platina 1"));
        produtos.add(new Produto(new BigInteger("3"), "Nintendo 3DS", new BigDecimal("660.00"), "Acompanha 4 jogos originais"));
        produtos.add(new Produto(new BigInteger("4"), "AWP Asiimov", new BigDecimal("130.00"), "Pouco usada (minimal wear)"));
    }

    public void addProduto(BigInteger id, String nome, BigDecimal preco, String descricao){
        produtos.add(new Produto(id, nome, preco, descricao));
    }

    public List<Produto> getProdutos(){
        return Estoque.produtos;
    }
}

And this is the result

What it should be

Thank you guys, I've found the answer.

The foreach was in the wrong div, should be in the one below it.

This code now works:

                <div id="portfoliolist" >
                    <div class="portfolio usado escambolivre" data-cat="usado escambolivre" th:each="produto : ${estoque}">
                        <div class="portfolio-wrapper"> 
                        <a rel="group" title=""  th:href="'/produto?id='+${produto.id}">
                            <img th:src="'images/'+${produto.id}+'.jpg'" alt=""  class="img-responsive caixa-img-produto" />
                        </a>
                            <div class="label">
                                <div class="label-text">
                                    <span class="text-category" th:text="${produto.nome}"></span>
                                </div>
                                <div class="label-bg"></div>
                            </div>
                        </div>
                    </div>
                </div>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM