如何显示多个html

How to reveal multiple html?

本文关键字：html 显示 何显示      更新时间：2023-09-26

假设我得到了这个伪代码:

itemset1[apple,orange]
itemset2[banana,potato]
<div>
  <header>
    <h3>Mylist</h3>
   </header>
   <ul>
    <li>itemset1[]</li>
  </ul>
</div>

<div>
  <header>
    <h3>Mylist</h3>
   </header>
   <ul>
    <li>itemset2[]</li>
  </ul>
</div>

有没有办法让我只写一次html代码?像

<div>
  <header>
    <h3>Mylist</h3>
   </header>
   <ul>
    <li>items</li>
  </ul>
</div>

和显示两次像第一个例子(一个为itemset1和一个为itemset2)，我可以使用所有的javascript或PHP，但更喜欢javascript

有两种(或更多?)PHP或JavaScript渲染

With PHP at view

例如，使用foreach ($itemset1 as $item)可能是你想要的。

<div>
    <header>
        <h3>Mylist</h3>
    </header>
    <ul>
    <?php foreach ( $itemset1 as $item ) { ?>
        <li><?php echo $item ?></li>
    <?php } ?>
    </ul>
</div>
使用JavaScript

在本例中，我使用AngularJS来呈现数据。假设您已经知道AngularJS是什么，并且已经为此做好了准备。

<div>
    <header>
        <h3>Mylist</h3>
    </header>
    <ul>
        <li ng-repeat="item in itemset1">{{ item }}</li>
    </ul>
</div>

当然，如果你喜欢，jQuery也是一个不错的选择。但是讨厌jQuery的append表达式。而且很不方便。

参见参考:

PHP: foreach - manual

AngularJS: API: ngRepeat

当然，但是现在我必须写

<div>
    <header>
        <h3>Mylist</h3>
    </header>
    <ul>
        <li ng-repeat="item in itemset1">{{ item }}</li>
    </ul>
</div>
<div>
    <header>
        <h3>Mylist</h3>
    </header>
    <ul>
        <li ng-repeat="item in itemset2">{{ item }}</li>
    </ul>
</div>

我可以避免写两次所有这些div,header,ul,li元素吗?

相关文章：