javascript - 想知道如何在 jquery 或 JS 中实现类似于 *ngFor/ng-repeat 的东西

Question

是否可以在 jQuery 或 vanilla JS 中有类似 ngFor 或 ng-repeat 的概念？

想做一些类似但不是 Angular 事情。

<div *ngFor="let inputSearch of searchBoxCount" class="col-sm-12">
    <textarea name="{{inputSearch.name}}" id="{{inputSearch.name}}" rows="2" class="search-area-txt" attr.placeholder="{{placeholder}} {{inputSearch.name}}">
    </textarea>
</div>

可以与 data="" 属性一起使用，以有意义的为准。

Answer 1

如果你想在 javascript 中使用它，你必须在循环中动态创建元素。 angular 中的 *ngFor 和 ngRepeat 是包含我们不能在 javascript 或 jquery 中拥有的模板绑定(bind)的指令。一旦指令遇到 Angular ，尝试渲染相应的模板直到循环结束。无论如何，通过 javascript 我们可以这样做。如果你想将 6 个 div 附加到具有相应 id 的 body 元素，你必须像下面那样做。

var array = ['first', 'second', 'third', .......so on];
for(var i=0; i<array.length; i++){
   var elem = document.createElement("div");
   elem.setAttribute('id', array[i]);
   document.body.appendChild(elem);
}

我们不能像在 Angular 中使用 ngFor 那样做。