[英]Search on Collapsible contents not working in angular
我在我的有角度的应用程序中实现了可折叠。 但是那些可折叠的内容来自数据库服务,我正在ngFor as的帮助下设置这些可折叠的内容-
<input type="text" name="search" class="form-control" id="myInput" onkeyup="myFAQsSearchFun()" placeholder="Enter your query " >
<div *ngFor="let item of faqs;let i = index;" id="div2">
<button class="accordion" (click)="toggleAccordian($event, i)">
<a style="text-decoration:none;" > {{item.question}}</a>
</button>
<div class="panel" hide="!item.isActive">
<p><br> {{item.answer}} </p>
</div>
<br>
</div>
Collapsible工作正常,但问题是我想根据在搜索栏中键入的内容来搜索这些内容。 为此,我实现了以下代码-
function myFAQsSearchFun() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("div2");
li = ul.getElementsByTagName("button");
window.alert(li.length);
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
Window.alert给出的输出为“ 1”。 但是ngFor循环了3次,因为我可以看到3个可折叠对象。
我做错了。 请帮助。
提前致谢!
HTML:
<input [(ngModel)]="model.search" >
<div *ngFor="let item of faqs;let i = index;" >
<div *ngIf="!item.hidden">
<button class="accordion" (click)="toggleAccordian($event, i)">
<a style="text-decoration:none;" > {{item.question}}</a>
</button>
<div class="panel" hide="!item.isActive">
<p><br> {{item.answer}} </p>
</div>
<br>
</div>
</div>
JS:
model = {search: ''};
faqs = [{question:'asf',answer:'asd'}, {question:'asf',answer:'asd'}]
myFAQsSearchFun() {
var input, filter, ul, li, a, i, txtValue;
input = model.search;
filter = input.toUpperCase();
faqs.forEach((faq) => {
if (faq.question.toUpperCase().indexOf(filter) > -1) {
faq.hidden = false;
} else {
faq.hidden = true;
}
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.