是否可以在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=""
属性一起使用,无论哪个有意义。
答案 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);