選項卡切換多選
-
效果如下
1554477274277.gif - html
<div>
點擊的列表
<ul>
<li (click)="onItemClick(i)" *ngFor="let item of nameObjList;let i = index;" [ngClass]="currentIndex ===i&&showInput?'red': ''">{{item.name}} <span>{{item.status}}</span></li>
</ul>
<div [hidden]="currentIndex === 1||currentIndex === 2||!showInput">
名稱A <input type="text" [(ngModel)]="a" (keyup)="onChange(currentIndex)">
</div>
<div [hidden]="currentIndex === 0||currentIndex === 2||!showInput">
名稱B <input type="text" [(ngModel)]="b" (keyup)="onChange(currentIndex)">
</div>
<div [hidden]="currentIndex === 0||currentIndex === 1||!showInput">
名稱C <input type="text" [(ngModel)]="c" (keyup)="onChange(currentIndex)">
</div>
</div>
若使用ngIf來實現(xiàn)
例如 名稱A *ngIf="currentIndex ===0"&&showInput 即可
此處使用ngIf會簡便一些哑舒，但是由于組件較為復雜的情況型檀，不適合用ngIf躯嫉，就是用hidden來實現(xiàn)顯示隱藏
hidden不會將整個組件完全移除
- ts
inputValue = ''
showInput = false
currentIndex = 0
a = ''
b = ''
c = ''
onItemClick(i) {
if (this.currentIndex === i) {
this.showInput = !this.showInput
} else {
this.showInput = true
}
this.currentIndex = i
}
onChange(i) {
if (i === 0) {
this.nameObjList[i].status = this.a.trim().length > 0;
} else if (i === 1) {
this.nameObjList[i].status = this.b.trim().length > 0;
} else {
this.nameObjList[i].status = this.c.trim().length > 0;
}
}
一個變量即可進行單選的控制壶唤， 如果需要進行重復點擊后顯示隱藏崭孤， 則需要增加一個新的變量类嗤， 如果需要通過判斷輸入框是否有值，則需要判斷并給名稱的列表里面增加一個屬性來判斷其此時的狀態(tài)辨宠， 通過bool值來判斷有圖標或高亮等
