ค้นหาเว็บไซต์

html - Angular 2 typescript: วิธีแสดง dropdown และ textbox ตามปุ่มวิทยุ


UI ของฉันมีปุ่มวิทยุสองปุ่ม คือ YES และ NO ต้องการแสดง dropdown และ textbox ตามค่าของปุ่มวิทยุเหล่านี้ ตัวอย่างเช่น ถ้าผู้ใช้คลิกปุ่ม YES จะต้องแสดง dropdown แต่ถ้าผู้ใช้เลือกปุ่ม NO จะต้องแสดง textbox โดยใช้ Angular 2 และ TypeScript กรุณาใครก็ได้ให้ลิงก์หรือช่วยฉันทำ

คำตอบ #1

มีการเปลี่ยนแปลงเล็กน้อยกับคำตอบของ aholtry เนื่องจากวิธีนั้นน่าเสียดายที่จะใช้ไม่ได้ ค่าของปุ่มวิทยุไม่ใช่ boolean แต่เป็น string ดังนั้นค่าต้องถูกตรวจสอบกับค่าของสตริง ที่นี่ฉันใช้ "yes" และ "no"

ดังนั้น :

<input type="radio" [(ngModel)]="radioValue" value="yes" />YES
<input type="radio" [(ngModel)]="radioValue" value="no"/>NO

<select *ngIf="radioValue == 'yes'">
    <option>Some Option</option>
</select>

<input type="text" *ngIf="radioValue == 'no'" />

นี่ควรจะช่วยให้คุณเริ่มต้นได้! :)

คำตอบ #2

นี่คือตัวอย่างง่ายๆ โดยไม่เห็นโค้ดของคุณ ถ้าคุณสามารถให้ตัวอย่างโค้ดได้ ผมก็สามารถอธิบายเพิ่มเติมได้

<div>
    <input type="radio" [(ngModel)]="radioValue"  name="radioValue" value="true" />YES
    <input type="radio" [(ngModel)]="radioValue"  name="radioValue" value="false" />NO
</div>
<div>
    <select *ngIf="!radioValue">
        <option>Some Option</option>
    </select>
    <input type="text" *ngIf="radioValue" />
</div>