Question

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

想要做一些类似但不是有角度的事情。

<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

    const anArray = [
        { tittle: "One", body: "Example 1" },
        { tittle: "Two", body: "Example 2" }
    ]
    
    function ngForFunctionality() {
        let value = '';
        anArray.forEach((post) => {
            value += `<li>${post.tittle} - ${post.body}</li>`;
        });
        document.body.innerHTML = value;
    };
    
    ngForFunctionality();

<body></body>

Answer 2

如果你想在javascript中使用它，你必须在循环中动态创建元素。 * angular中的ngFor和ngRepeat是包含模板绑定的指令，我们无法在javascript或jquery中使用这些绑定。一旦指令遇到角度尝试渲染相应的模板，直到循环结束。无论如何，通过JavaScript，我们可以这样做。如果您想将6 divs附加到body元素并添加id，则必须执行以下操作。

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);
}

我们不能像在角度中那样做。

Answer 3

在JQuery中，我做了类似的事情：

HTML：

<div class="searchbox-container col-sm-12">        
</div>

JavaScript的：

var textAreas = $.map(searchBoxCount, function(inputSearch) {
    return $("<textarea></textarea")
      .attr({
        name: inputSearch.name,
        id: inputSearch.name
        rows: "2",
        placeholder: placeholder + " " + inputSearch.name
      })
      .addClass("search-area-txt");
});

$('.searchbox-container').append(textAreas);

想知道如何在jquery或JS

3 个答案: