檢查是否以角度選中復選框

Question

我有一個復選框列表，並且有一個特定的輸入文本，我只想在選中的復選框附近顯示。 在 AngularJs 中，它非常非常簡單。 從角度來看，這似乎是不可能的。 我看到這個問題有很多答案，但沒有一個有效！ 誰能給我一個簡單的工作解決方案？

謝謝，奧斯納特。

這是我的代碼：

<tr *ngFor="let eachService of services; let i = index">
     <td class="service-td" *ngIf="services[i]"><input type="checkbox">
          <span>{{services[i]}}</span>
     </td>
     <input [hidden]="???" type="text" value="wl">
</tr>

Answer 1

您可以執行以下操作，這是一個工作演示： https : //stackblitz.com/edit/angular-apfdfa ：

組件.ts

  selectedValue = '';
  services = ['service 1','service 2', 'service 3'];
  checked($val){
    this.selectedValue = $val;
  }

組件.html

<tr *ngFor="let eachService  of services; let i = index">
     <td class="service-td" *ngIf="services[i]">
       <input (change)="checked(eachService)" [checked]="selectedValue == eachService" type="checkbox" [value]="eachService">
          <span>{{eachService}}</span>
     </td>
     <input [hidden]="!(selectedValue === eachService)" type="text" [value]="eachService">
</tr>

Answer 2

通過使用ngModel您可以執行以下操作：

.html

Box1 <input #checkBox1 type="checkbox" [(ngModel)]="checkBox1.value">

<input [hidden]="checkBox1.checked" placeholder="Something for box1.."/>

工作演示可以在這里找到。

Answer 3

它只使用 [(ngModel)] 和一個變量。 如果您遍歷對象數組，只需向您的對象添加一個“已檢查”的新屬性即可。 你可以讓它“飛行”

想象一下你的“服務”是一個對象數組

[{name:"Service1",value:"some value"},{name:"service2",value:"some value"}]

<tr *ngFor="let eachService of services; let i = index">
     <td class="service-td">
          <input type="checkbox" [(ngModel)]="eachService.checked">
          <span>{{eachService.name}}</span>
     </td>
     <input [hidden]="!eachService.checked" type="text" [(ngModel)]="eachService.Value">
</tr>

好吧，但是您沒有對象數組，您有一個字符串數組，實際上是兩個字符串數組（一個用於顯示服務，另一個用於存儲值。好吧，創建一個新的布爾值數組來顯示或不顯示輸入

checks:boolean[]=[]
values:string[]=[]
services:string[]=["service1","service2"]

<tr *ngFor="let eachService of services; let i = index">
     <td class="service-td">
          <input type="checkbox" [(ngModel)]="checks[i]">
          <span>{{eachService}}</span>
     </td>
     <input [hidden]="!checks[i]" type="text" [(ngModel)]="values[i]">
</tr>

注意：在這種情況下不要忘記，在發送數據之前檢查“檢查”是否為真

this.values=this.values.filter((x,index)=>this.checks[index])

Answer 4

對於多個復選框選中並僅顯示相應的 div ，您可以通過多種方式進行跟蹤。

一種。 跟蹤索引並存儲在數組中並僅顯示已檢查的索引。

灣 angular 已經提供 @ViewChildren 來特別跟蹤元素。

C。 您甚至可以使用鍵作為 id 和布爾值來創建地圖以顯示或隱藏元素。並且可以使用地圖進行切換。

使用@ViewChildren 的示例：-

<tr *ngFor="let eachService of services; let i = index">
                <td class="service-td"><input type="checkbox" 
(change)="toggle($event,i)">  
                     <span>{{services[i]}}</span> 
                </td>
                <input  [id]="i" style="display: none;"   type="text" 
 [value]="services[i]" #help>
           </tr>

.ts 文件：-

@ViewChildren('help') help :any[]; // declare it.


toggle(event,j){
this.help.forEach((ele: ElementRef) => {
  if(ele.nativeElement.id == j && event.target.checked){
    ele.nativeElement.style.display='block';                  
  }else if(ele.nativeElement.id == j && !event.target.checked){
    ele.nativeElement.style.display='none';
  } 

});
}

Answer 5

我不確定你到底想要什么，但我認為你可能需要這樣的東西。

componet.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  services = [{key: "a"},{key: "b"},{key: "c"},{key: "d"}];
}

component.html

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>

<tr *ngFor="let eachService of services;">
     <td class="service-td">
       <input [(ngModel)]="eachService.checked" type="checkbox" #p > <span>{{eachService.key}}</span>
       <span *ngIf="eachService.checked">
         <input type="text" placeholder="{{eachService.key}} is selected">
       </span>
     </td>
</tr>
<br>
<br>

{{services | json}}

https://stackblitz.com/edit/angular-lr3fat