想知道如何在jquery或JS

时间:2016-12-22 17:49:35

标签: javascript jquery angularjs

是否可以在jQuery或vanilla JS中使用ngForng-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=""属性一起使用,无论哪个有意义。

3 个答案:

答案 0 :(得分:5)

    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>

答案 1 :(得分: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);
}

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

答案 2 :(得分:2)

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