如何在 HTML 模板中使用 for 循环

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/27314579/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 03:09:13  来源:igfitidea点击:

how to use for loop inside HTML template

htmljstl

提问by Mayur Lunawat

I have an html template which I use in marionette view . I pass a parameter in the template when I call it inside the render function . I want to add multiple div elements depending on the value of the parameter .How can I add for loop inside html template??

我有一个在木偶视图中使用的 html 模板。当我在渲染函数中调用它时,我在模板中传递了一个参数。我想根据参数的值添加多个 div 元素。如何在 html 模板中添加 for 循环?

<div id="mainArea">
    <div data-role="view">
        <div id="scrollView" data-role="scrollView" data-stretch="true">
            <div id = 'leftArrowImage' class="leftArrowImage">
            </div>

            <div id = 'mainViewArea'></div>
            <div id = 'rightArrowImage'></div>
           
            
           /* I have passed a variable here named allWidgets. I want to add the number of divs(<div data-role="page" ></div>) equal to the length of allWidgets array. How do I do that*/ 
        </div>
    </div>
</div>

采纳答案by Mayur Lunawat

<link rel="stylesheet" type="text/css" href="Widgets/ReportWidget/styles/scrollLayout.css"/>

<div id="mainArea">
    <div data-role="view">
        <div id="scrollView" data-role="scrollView" data-stretch="true">
            <div id = 'leftArrowImage' class="leftArrowImage">
            </div>

            <div id = 'mainViewArea'></div>
            <div id = 'rightArrowImage'></div>
            <%  var i;
            for i in allWidgets{ %>
                <div data-role="page" class="pages"  >
            </div>
            }%>
        </div>
    </div>
</div>

回答by jen

If you are in Angular use *ngForwhere wis now each element in allWidgetsarray and will create a divfor each element. You may need binding around the [data-role].

如果您在 Angular 中使用*ngForwherew现在是allWidgets数组中的每个元素,并且将为div每个元素创建一个。您可能需要在[data-role].

<div *ngFor="let w of allWidgets">
  <div data-role="page"></div>
</div>

回答by Semih Eker

If you talking about(I am not sure that understand the question exactly),Could you try this;

如果您谈论(我不确定是否完全理解问题),您可以试试这个吗?

<div id="mainArea">
    <div data-role="view">
        <div id="scrollView" data-role="scrollView" data-stretch="true">
            <div id = 'leftArrowImage' class="leftArrowImage">
            </div>
            <div id = 'mainViewArea'></div>
            <div id = 'rightArrowImage'></div>


           <c:forEach var="widget" items="${allWidgets}">
                 // Here, you can add parameters about widget objects in allWidgets
                 <div data-role="page" ></div> 
           </c:forEach>
        </div>
    </div>
</div>

You must also define the top of your jsp file below code,

您还必须在代码下方定义 jsp 文件的顶部,

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>