选项卡切换多选
-
效果如下
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来实现
例如 名称A *ngIf="currentIndex ===0"&&showInput 即可
此处使用ngIf会简便一些，但是由于组件较为复杂的情况，不适合用ngIf，就是用hidden来实现显示隐藏
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;
}
}
一个变量即可进行单选的控制， 如果需要进行重复点击后显示隐藏， 则需要增加一个新的变量， 如果需要通过判断输入框是否有值，则需要判断并给名称的列表里面增加一个属性来判断其此时的状态， 通过bool值来判断有图标或高亮等
